7.1.3 플렉스 박스 레이아웃의 정렬 속성
플렉스 아이템을 정렬할 수 있는 속성을 살펴보겠습니다.
● justify-content 속성
justify-content는 플렉스 아이템을 주축 방향으로 정렬할 때 사용하는 속성입니다.
형식
justify-content:<속성값>;
사용할 수 있는 속성값은 다음과 같습니다.
표 7-3 justify-content 속성값
|
속성값 |
설명 |
|
flex-start |
주축 방향의 시작을 기준으로 정렬합니다. |
|
flex-end |
주축 방향의 끝을 기준으로 정렬합니다. |
|
center |
주축 방향의 중앙에 정렬합니다. |
|
space-between |
플렉스 아이템 사이의 간격이 균일하도록 정렬합니다. |
|
space-around |
플렉스 아이템의 둘레(around)가 균일하도록 정렬합니다. |
|
space-evenly |
플렉스 아이템 사이와 양끝의 간격이 균일하도록 정렬합니다. |