[CSS 속성] Flex 속성 정리

18. 플렉스(정렬) Container ~ 20. 플렉스(정렬) Items

1. Flex Items 묶음(줄 바꿈) 여부

flex-wrap

• nowrap : 묶음(줄 바꿈) 없음
• wrap : 여러 줄로 묶음
• wrap-reverse : wrap의 반대 방향으로 묶음

2. 주 축의 정렬 방법

justify-content

• flex-start : Flex Items를 시작점으로 정렬
• flex-end : Flex Items를 끝점으로 정렬
• center : Flex Items를 가운데 정렬
• space-between : 각 Flex Item 사이를 균등하게 정렬
• space-around : 각 Flex Item의 외부 여백을 균등하게 정렬

3. 교차 축의 여러 줄 정렬 방법 : 활용이 높지 않다.

align-content

• stretch : Flex Items를 시작점으로 정렬
• flex-start : Flex Items를 시작점으로 정렬
• flex-end : Flex Items를 끝점으로 정렬
• center : Flex Items를 가운데 정렬
• space-between : 각 Flex Item 사이를 균등하게 정렬
• space-around : 각 Flex Item의 외부 여백을 균등하게 정렬

4. 교차 축의 한 줄 정렬 방법

align-items

• stretch : Flex Items를 교차 축으로 늘림
• flex-start : Flex Items를 각 줄의 시작점으로 정렬
• flex-end : Flex Items를 각 줄의 끝점으로 정렬
• center : Flex Items를 각 줄의 가운데 정렬
• baseline : Flex Items를 각 줄의 문자 기준선에 정렬

5. Flex Item의 순서

order

• 0 : 순서 없음
• 숫자 : 숫자가 작을 수록 먼저

6. Flex Item의 증가 너비 비율

flex-grow

• 0 : 증가 비율 없음
• 숫자 : 증가 비율

7. Flex Item의 감소 너비 비율

flex-shrink

• 1 : Flex Container 너비에 따라 감소 비율 적용
• 숫자 : 감소 비율

8. Flex Item의 공간 배분 전 기본 너비

flex-basis

• auto : 요소의 Content 너비
• 단위 : px, em, rem 등 단위로 지정