부모요소에 display:flex주고, 자식요소에 flex:1;을 주면, 그 자식요소는 부모요소의 한계까지만 최대치로 늘어나게 된다.
flex-grow, flex-shrink, flex-basis
flex:1;
flex-grow, flex-shrink, flex-basis를 한 번에 사용하는 단축 속성
flex: 1은 flex: 1 1, flex: 1 1 0과 같다.
flex-grow
[기본값] flex-grow: 0;
0 : 부모의 너비가 남을 경우에도 해당 아이템의 기본 너비를 유지한다.
1 : 부모의 너비가 남을 경우 너비를 채운다.
flex-shrink
[기본값] flex-grow: 1
0 : 부모의 너비가 해당 아이템보다 작아져도 크기가 줄어들지 않는다.
1 : 부모의 너비가 해당 아이템보다 작아지면 부모의 너비에 맞추어 줄어든다.
flex-basis
[기본값] flex-basis: auto (컨텐츠 너비를 뜻함)
해당 아이템의 기본 너비를 지정한다.
0 : 해당 아이템이 부모의 너비에 따라 결정하게 된다.
flex-basis가 0이니까 부모의 너비에 맞추게 된다.
따라서 부모의 너비가 남을 경우 그 공간을 채우고, 부모가 해당 아이템의 너비보다 작아졌을 때 줄어들게 된다.
flex-wrap
nowrap
부모 넓이에 맞게 요소들의 넓이를 강제 축소
wrap
부모 넓이보다 요소들의 총 넓이가 크다면 나머지 요소들을 다음줄로 줄바꿈
wrap-reverse
줄바꿈 하는 요소들을 역순으로 배열
initial
기본값 (nowrap)
inherit
부모요소의 설정값을 사용
