[CSS] justify-content 속성

justify-content

CSS의 justify-content 속성은 브라우저가 flex container의 main 축과 grid container의 inline 축에 따라 요소 간의 간격과 주변 공간을 분배하는 방법을 정의한다.

 

Try it

justify-content: start;

justify-content: start;

 

justify-content: center;

justify-content: center;

 

justify-content: space-between;

justify-content: space-between;

 

justify-content: space-around;

justify-content: space-around;

 

justify-content: space-evenly;

justify-content: space-evenly;

Syntax

/* Positional alignment */
justify-content: center; /* center 주위로 item들을 묶는다 */
justify-content: start; /* start 로부터 item들을 묶는다 */
justify-content: end; /* end 로부터 item들을 묶는다 */
justify-content: flex-start; /* start 로부터 flex item들을 묶는다 */
justify-content: flex-end; /* end 로부터 flex item들을 묶는다 */
justify-content: left; /* left 로부터 item들을 묶는다 */
justify-content: right; /* right 로부터 item들을 묶는다 */

/* Baseline alignment */
/* justify-content 는 basline 값을 취하지 않는다 */

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between; /* item들을 동등하게 분배한다. 첫 번째 항목은 시작에 위치하고, 마지막 항목은 끝에 위치한다 */
justify-content: space-around; /* item들을 동등하게 분배한다. 항목의 양쪽 끝에 절반 크기의 공간이 있다 */
justify-content: space-evenly; /* item들을 동등하게 분배한다. 항목 주위에 동일한 공간이 있다 */
justify-content: stretch; /* item들을 동등하게 분배한다. 컨테이너에 맞게 아이템을 '자동'으로 사이즈를 늘린다 */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;