CSS Flex, Grid (+Float와의 차이)

수정중

flex - CSS: Cascading Style Sheets | MDN

flex

flex 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해
크기를 키우거나 줄이는 방법을 설정하는 속성입니다.


대부분의 경우, flex의 값에는 auto, initial, none이나 단위 없는 양의 수를 사용해야 합니다.

flex: 1;
flex: 1 30px;
flex: 1 1 100px;

auto, initial, none

initial	아이템 크기가 각각의 width와 height 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수는 있지만, 남은 공간을 채우려 늘어나지는 않습니다. = flex: 0 1 auto와 동일합니다.
auto	아이템 크기가 각각의 width와 height 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수 있으며, 남은 공간을 채우기 위해 늘어날 수도 있습니다. = flex: 1 1 auto와 동일합니다.
none	아이템 크기가 각각의 width와 height 속성에 따라 정해지며, 컨테이너의 크기에 관계 없이 변하지 않습니다. = flex: 0 0 auto와 동일합니다.
그 외에도 숫자 사용시 (flex-grow) length 또는 퍼센트(%) 사용시 (flex-basis) flex 값이 두개 일땐 처음: 숫자 / 두번째 : length,퍼센트,auto (만약 값이 세개면 숫자 / 숫자 / length,퍼센트,auto)