justify-content

플렉스 박스와 그리드 아이템이 컨테이너의 주축을 따라 어떻게 배치되는지 제어하는 유틸리티입니다.

Class Styles

Class	Styles
`justify-start`	`justify-content: flex-start;`
`justify-end`	`justify-content: flex-end;`
`justify-center`	`justify-content: center;`
`justify-between`	`justify-content: space-between;`
`justify-around`	`justify-content: space-around;`
`justify-evenly`	`justify-content: space-evenly;`
`justify-stretch`	`justify-content: stretch;`
`justify-baseline`	`justify-content: baseline;`
`justify-normal`	`justify-content: normal;`

justify-start

justify-content: flex-start;

justify-end

justify-content: flex-end;

justify-center

justify-content: center;

justify-between

justify-content: space-between;

justify-around

justify-content: space-around;

justify-evenly

justify-content: space-evenly;

justify-stretch

justify-content: stretch;

justify-baseline

justify-content: baseline;

justify-normal

justify-content: normal;

예제

justify-start를 사용하여 아이템들을 컨테이너의 주축 시작점에 정렬할 수 있습니다:

<div class="flex justify-start ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

컨테이너의 주축을 따라 아이템을 가운데로 정렬하려면 justify-center를 사용하세요:

<div class="flex justify-center ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

justify-end를 사용하여 컨테이너의 메인 축 끝에 아이템을 정렬할 수 있습니다:

<div class="flex justify-end ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

justify-between을 사용하면 컨테이너의 주축을 따라 각 아이템 사이에 동일한 간격을 두고 정렬할 수 있습니다:

<div class="flex justify-between ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

justify-around을 사용하면 컨테이너의 주축을 따라 각 아이템의 양쪽에 동일한 공간이 생기도록 아이템을 정렬할 수 있습니다:

<div class="flex justify-around ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

justify-evenly를 사용하면 컨테이너의 주축을 따라 각 아이템 주위에 동일한 간격을 두고 정렬할 수 있습니다. 이는 justify-around를 사용할 때 각 아이템 사이에 보통 두 배의 간격이 생기는 것과 달리, 모든 간격이 동일하게 유지됩니다:

<div class="flex justify-evenly ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

justify-stretch를 사용하면 컨테이너의 주축을 따라 콘텐츠 아이템이 사용 가능한 공간을 채우도록 할 수 있습니다:

<div class="grid grid-flow-col ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

justify-normal을 사용하면 justify-content 값을 설정하지 않은 것처럼 콘텐츠 항목을 기본 위치에 배치할 수 있습니다.

<div class="flex justify-normal ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

접두사 a justify-content 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<div class="flex justify-start md:justify-between ...">  <!-- ... --></div>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.