CSS정렬 - Flex Items

Flex Items 속성

속      성	설      명	값
order	Flex Item의 순서	0 : 순서 없음 숫자 : 숫자가 작을 수록 먼저
flex-grow	Flex Item의 증가 너비 비율	0 : 증가 비율 없음 숫자 : 증가 비율
flex-shrink	Flex Item의 감소 너비 비율	1 : Flex Container 너비에 따라 감소 비율 적용 숫자 : 감소 비율
flex-basis	Flex Item의 공간 배분 전 기본 너비	auto : 요소의 content 너비 단위 : px, em, rem 등 단위로 지정

 

order 속성

• 작을수록 정렬된다.

flex-grow 속성

• Flex Container에 나머지가 있을 경우 나머지 부분을 어느 비율로 채울 것인가를 계산
• flex-grow가 0일 경우 지정해준 크기만큼 채우고
• flex-grow가 0이 아닌 Flex Items들이 비율만큼 채운다.

 

flex-shrink 속성

• Flex Items보다 Flex Container의 크기가 더 작을 때 설정을 다룬다.
• 기본적으로 Flex Container의 크기에 맞추지만
• 0으로 설정하면 Flex Items는 그대로 두고 Flex Container가 늘어난다.

 

flex-basis 속성

• flex-basis를 지정하게 되면 지정된 값을 제외한 나머지 부분을 제외하고 분할하게 된다.
• flex-basis를 100px로 지정해두면
• Item 중심에 100px을 없애고 나머지를 분할한다.