👩🏻💻 이해가 가면서도 막사 사용하려하면 헷갈리는 속성들이다.. 헷갈릴때마다 찾기 번거로우니까 정리해보자고~~!!????!!!!
📌 flex-grow
- 이 값은 flex 아이템이 남은 공간을 얼마나 차지할지를 결정합니다.
- 기본값은 0인데, 이 경우 남은 공간이 있어도 아이템이 커지지 않습니다.
- 값을 1로 설정하면, 아이템이 가능한 모든 남은 공간을 차지하게 됩니다.
- 예를 들어, flex-grow: 2는 flex-grow: 1보다 두 배 더 많은 공간을 차지하게 됩니다.
📌flex-shrink
- 이 값은 flex 아이템이 컨테이너의 크기가 줄어들 때 얼마나 줄어들지를 결정합니다.
- 기본값은 1로, 컨테이너가 작아지면 아이템이 줄어듭니다.
- 0으로 설정하면 아이템은 크기를 줄이지 않습니다.
- 예를 들어, flex-shrink: 0으로 설정하면 아이템은 줄어들지 않고, 공간이 부족하면 아이템이 화면을 넘치게 될 수 있습니다.
📌 flex-basis
- 이 값은 flex 아이템의 기본 크기를 설정합니다. 즉, 아이템이 기본적으로 얼마나 차지할지를 결정합니다.
- 기본값은 auto로, 아이템의 내용에 따라 크기가 결정됩니다. 값으로는 픽셀(px), 퍼센트(%), 혹은 기타 단위를 사용할 수 있습니다.
- 예를 들어, flex-basis: 200px로 설정하면, 아이템의 기본 크기는 200픽셀이 됩니다.
👩🏻💻 flex 속성은 flex-grow, flex-shrink, flex-basis를 하나의 단축 속성으로 동시에 설정할 수 있습니다
flex: [flex-grow] [flex-shrink] [flex-basis];
이 순서로 사용 가능하며,
예시
.item {
flex: 2 1 150px;
}
- flex-grow는 2로 설정되어 있으며, 이는 아이템이 남는 공간을 두 배 더 많이 차지한다는 의미입니다.
- flex-shrink는 1로 설정되어 있으며, 이는 컨테이너의 크기가 줄어들 때 아이템이 줄어들 수 있음을 의미합니다.
- flex-basis는 150px로 설정되어 있으며, 이는 아이템의 기본 크기가 150픽셀이라는 의미입니다.
👩🏻💻 즉!!! 정리하자면
- flex-grow는 남은 공간을 얼마나 많이 차지할지를 결정합니다.
- flex-shrink는 공간이 부족할 때 얼마나 줄어들지를 결정합니다.
- flex-basis는 아이템의 기본 크기를 설정합니다.
한꺼번에 같이 사용도 가능합니다!! ✨
