반응형
order : Flex Item 의 순서
0(기본값) : 순서 없음
숫자 : 숫자가 작을수록 먼저
order: -1; > order: 0; > order: 2; > order: 17;
flex-grow : Flex Item의 증가 너비 비율
0(기본값) : 증가 비율 없음
숫자 : 증가 비율
flex-grow: 1; flex-grow: 2; flex-grow: 1;
-> 1대 2대 1 비율로 너비 증가
flex-shrink : Flex Item의 감소 너비 비율
1(기본값) : Flex Container 너비에 따라 감소 비율 적용
숫자 : 감소 비율
*감소 비율을 0으로 입력하면 감소되지 않음
기본값이 1인 Item들은 컨테이너가 줄어들 때 같이 줄어들지만
flex-shrink: 0; 일 때의 Item은 컨테이너가 줄어도 Item의 크기를 유지한다.(요소들이 찌그러지지 않음)
flex-basis : Flex Item의 공간 배분 전 기본 너비
auto(기본값) : 요소의 content 너비
단위 : px, em, rem등 단위로 지정