flex-basis
- flex 자식 아이템의 기본 크기를 설정.
- flex-direction이 row일 때는 width를 설정하고, column일 때는 height을 설정한다.
- flex-basis의 기본값은 auto.
- width를 따로 설정하지 않으면 컨텐츠가 차지하는 넓이와 같은 값이 됨.
- width를 설정하면 설정값과 동일한 값.
ex)
아이템에 width를 설정하지 않고, flex-basis:100px를 적용하면
-> 아이템이 100px 보다 작으면 100px로 맞춰지고, 아이템이 100px 보다 크다면 100px에 맞추지 않고 그 크기 그대로 유지됨
-> 따라서, 100px로 통일하고 싶다면 flex-basis와 width 둘 다 설정해야 함 (flex-basis: 100px, width: 100px)
flex-grow
- 자식 아이템이 flex-basis의 값보다 커질 수 있는지 결정하는 속성
- 기본값 : 0
- 기본값인 0보다 큰 값이 셋팅되면, 그만큼 커지며 빈공간을 메움
.item {flex-grow: 1}
.item2 {flex-grow: 2}
.item3 {flex-grow: 1}-> flex-grow에 지정한 숫자는 아이템들의 flex-bsis를 제외한 여백부분의 비율을 나누어 가진다고 보면 됨
flex-shrink
- 자식 아이템이 flex-basis의 값보다 작아질 수 있는 결정하는 속성
- 기본값 : 1
- 기본값을 따로 셋팅하지 않아도 아이템이 flex-basis보다 작아질 수 있음
- 0보다 큰 값이 셋팅되면 flex-basis보다 작아짐
- 고정폭을 사용하고 싶으면 flex-shrink를 0으로 셋팅하고 고정 크기 width를 설정하면 됨
.item 1 {
flex-shrink:0;
width: 100px;
}flex
- flex-grow, flex-shrink, flex-basis를 한꺼번에 쓸 수 있는 축약형 속성
💡 자주 사용하는 축약형 메모
-
flex: 1
flex-basis를 0으로 만들고 나머지 flex-grow, flex-shrink를 1로 지정한다 -> 화면 비율에 따라 유연하게 늘어나거나 줄어들 수 있게 할 수 있다.item { flex: 1; // flex-grow: 1; flex-shrink: 1; felx-basis: 0% } -
flex: 0 1 auto
flex: initial과 같은 말임.
flex-grow가 0이니까 flex-basis 값보다 커지지 않고, flex-shrink가 1이므로 flex 컨테이너 공간이 모자라면 크기가 줄어든다. 그리고 flex-basis가 auto이므로 flex-direction 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지한다 -
flex: 1 1 auto
flex: auto와 같은 말임.
flex-direction 방향에 여유 공간이 있을 때 flex 항목들이 늘어나고 줄어들면서 그 공간을 채운다 -
flex: 0 0 atuo
flex: none과 같은 말임.
flex 컨테이너의 크기가 변해도 크기는 변하지 않고, flex-basis를 auto로 지정했을 때 정해지는 크기로 결정된다
💡 flex-basis의 값이 auto(기본값)과 0일 때 정리
-
flex-basis: auto (기본값)
아이템의 width 또는 height의 값을 사용. -
flex-basis: 숫자값 (0 제외)
flex box안에 50px인 A, 80px인 B, 150px인 C가 있을 때, flex-basis: 80px로 설정하면 A는 50px에서 100px로 늘고, B는 같은 80px이므로 변화가 없고, C는 150px이므로 80px 보다커서 그대로 유지됨 -
flex-basis: 0
flex 자식 아이템의 기본 크기를 0으로 설정하는 것이므로, 콘텐츠의 크기와 관계없이 flex-grow, flex-shrink 설정 비율대로 아이템의 너비 또는 높이를 배분한다.
왜냐하면, flex-grow는 아이템들의 Flex-basis를 제외한 여백 부분을 비율로 나누어 가지는데 현재 flex-basis가 0이므로 여백이 100%인 상태이다. 그래서 콘텐츠의 크기와 상관없이 flex-grow 설정 비율대로 아이템의 너비를 배분한다.
ex) flex-grow: 1로 설정하고 flex-basis를 auto로 설정했을때: 아이템의 크기가 자신의width 또는 height으로 설정되지만 flex-grow가 1이므로 모두 같은 크기의 여백을 가지지만 각각의 width 또는 height이 다르므로 아이템의 너비도 달라진다.
ex) flex-grow: 1로 설정하고 flex-basis를 0으로 설정했을때: 아이템의 기본 크기가 0이므로 여백이 100%인 상태이다. 따라서 아이템의 크기가 모두 같은 width 또는 height을 나누어 가진다.
출처
https://velog.io/@garcon/Flexbox-flex-basis-auto%EC%99%80-0%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
