[CSS] 플렉스 박스 주축 항목 정렬 속성 ✍️

• 플렉스 컨테이너의 배치 관련 속성

플렉스 컨테이너의 주축에서 또는 교차축에서 요소를 어떻게 정렬할 것인지 지정하는 속성이다.

속성값	설명
justify-content	주축의 정렬 방법
align-items	교차축의 정렬 방법
align-content	교차축에 여러 줄로 표시할 때 사용하는 정렬 방법

---

• flex-direction의 속성값

flex-direction 속성은 플렉스 컨테이너의 주축과 방향을 지정하는 속성이다.

속성값	설명
row	주축을 가로로 지정하고 왼쪽에서 오른쪽으로 정렬. 기본값
row-reverse	주축을 가로로 지정하고 오른쪽에서 왼쪽으로 정렬
column	주축을 세로로 지정하고 위쪽에서 아래쪽으로 정렬
column-reverse	주축을 세로로 지정하고 아래쪽에서 위쪽으로 정렬

 

---

• 플레스 항목의 줄을 바꾸는 flex-wrap 속성

flex-wrap 속성은 플렉스 컨테이너 너비보다 플렉스 항목이 많은 경우 줄을 바꿀지 여부를 지정한다.

속성값	설명
nowrap	플렉스 항목을 한 줄로 표시. 기본값
wrap	플렉스 항목을 여러 줄로 표시
wrap-reverse	플렉스 항목을 여러 줄로 표시하되, 교차축과 시작점이 바뀜

 

---

• 배치 방향과 줄 바꿈을 한꺼번에 지정하는 flex-flow 속성

flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정한다. (기본 속성값은 row nowrap)

 

---

• 주축 정렬 방법을 지정하는 justify-content 속성

justify-content 속성은 주축에서 플렉스 항목 간의 정렬 방법을 지정한다.

속성값	설명
flex-start	주축의 시작점에 맞춰 정렬. 기본값
flex-end	주축의 끝점에 맞춰 정렬
center	주축의 중앙에 맞춰 정렬
space-between	시작점과 끝점 정렬 후 나머지 항목은 같은 간격으로 정렬
space-around	각 항목의 양쪽 여백의 절반만큼 자리 차지
space-evenly	각 항목의 여백을 모두 동일하게 항목 정렬