align-content

여러 행을 가진 플렉스 및 그리드 컨테이너에서 행의 위치를 조절하는 유틸리티입니다.

Class Styles

content-normal

align-content: normal;

content-center

align-content: center;

content-start

align-content: flex-start;

content-end

align-content: flex-end;

content-between

align-content: space-between;

content-around

align-content: space-around;

content-evenly

align-content: space-evenly;

content-baseline

align-content: baseline;

content-stretch

align-content: stretch;

예제

content-start를 사용하여 컨테이너 안의 행들을 교차 축(cross axis)의 시작 부분에 정렬할 수 있습니다.

<div class="grid h-56 grid-cols-3 content-start gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div></div>

content-center를 사용하면 컨테이너 내에서 행을 교차 축의 중앙에 배치할 수 있습니다.

<div class="grid h-56 grid-cols-3 content-center gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div></div>

content-end를 사용하여 컨테이너 안의 행을 교차 축의 끝에 맞춰 정렬할 수 있습니다:

<div class="grid h-56 grid-cols-3 content-end gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div></div>

content-between을 사용하면 컨테이너 내의 각 행 사이에 동일한 간격을 두고 배치할 수 있습니다:

<div class="grid h-56 grid-cols-3 content-between gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div></div>

content-around를 사용하면 각 행 주변에 동일한 간격을 두고 배치할 수 있습니다.

<div class="grid h-56 grid-cols-3 content-around gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div></div>

content-evenly를 사용하면 컨테이너 내의 행을 각 아이템 주위에 동일한 간격으로 배치할 수 있습니다. 이는 content-around를 사용할 때 각 아이템 사이에 보통 두 배의 간격이 생기는 것을 고려한 방식입니다:

<div class="grid h-56 grid-cols-3 content-evenly gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div></div>

content-stretch를 사용하면 컨테이너의 교차 축(cross axis)을 따라 콘텐츠 아이템이 사용 가능한 공간을 채우도록 할 수 있습니다.

<div class="grid h-56 grid-cols-3 content-stretch gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div></div>

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

<div class="grid h-56 grid-cols-3 content-normal gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div></div>

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

<div class="grid content-start md:content-around ...">  <!-- ... --></div>

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