Justify Content

Justify Content

flex나 grid 컨테이너의 주축(main axis)에서 항목들을 어떻게 정렬할지 정해주는 유틸리티예요. 시작, 중앙, 끝, 그리고 항목 사이의 간격 배분 방식을 조절할 수 있어요.

출처: 문서

본문

ClassStyles

예시 (Examples)

시작 (Start)

justify-start 유틸리티를 사용하면 항목들을 컨테이너의 주축 시작 부분에 맞춰 정렬해요.

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

중앙 (Center)

justify-center 또는 justify-center-safe 유틸리티를 사용하면 항목들을 컨테이너의 주축 중앙에 맞춰 정렬해요.

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

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

공간이 충분하지 않을 때 justify-center-safe 유틸리티는 중앙 대신 컨테이너의 시작 부분에 항목들을 정렬해요.

끝 (End)

justify-end 또는 justify-end-safe 유틸리티를 사용하면 항목들을 컨테이너의 주축 끝 부분에 맞춰 정렬해요.

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

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

공간이 충분하지 않을 때 justify-end-safe 유틸리티는 끝 대신 컨테이너의 시작 부분에 항목들을 정렬해요.

사이 여백 (Space between)

justify-between 유틸리티를 사용하면 각 항목 사이에 동일한 공간이 있도록 주축을 따라 항목들을 정렬해요.

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

주위 여백 (Space around)

justify-around 유틸리티를 사용하면 각 항목의 양쪽에 동일한 공간이 있도록 주축을 따라 항목들을 정렬해요.

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

고르게 여백 (Space evenly)

justify-evenly 유틸리티를 사용하면 각 항목 주위에 동일한 공간이 있도록 정렬하는데, justify-around를 사용할 때 항목 사이에 공간이 두 배로 생기는 것을 보정해요.

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

늘이기 (Stretch)

justify-stretch 유틸리티를 사용하면 자동 크기(auto-sized)의 콘텐츠 항목들이 주축을 따라 사용 가능한 공간을 채우도록 만들 수 있어요.

<div class="grid grid-cols-[4rem_auto_4rem] justify-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

기본 (Normal)

justify-normal 유틸리티를 사용하면 마치 justify-content 값이 설정되지 않은 것처럼 항목들을 기본 위치에 배치해요.

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

반응형 디자인 (Responsive design)

justify-content 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

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

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

더 알아보기 (Learn more)