코딩 자율학습 HTML + CSS + 자바스크립트: 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	플렉스 아이템 사이와 양끝의 간격이 균일하도록 정렬합니다.

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.