align-content

align-content (콘텐츠 정렬)

그리드나 플렉스 같은 다중 라인 컨테이너에서 줄(row)들을 교차축(cross axis)을 따라 어떻게 배치할지를 정하는 유틸리티예요. 옆에서 하나씩 설명해 드릴게요.

출처: 문서

본문

ClassStyles

클래스 스타일
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;

Examples

Start

컨테이너 안의 줄들을 교차축의 시작 지점에 붙여서 배치하고 싶다면 content-start를 사용해요.

<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>

Center

컨테이너 안의 줄들을 교차축의 가운데에 모아 배치하고 싶다면 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>

End

컨테이너 안의 줄들을 교차축의 끝 지점에 붙여서 배치하고 싶다면 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>

Space between

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>

Space around

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>

Space evenly

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>

Stretch

content-stretch는 콘텐츠 항목들이 컨테이너의 교차축을 따라 남는 공간을 가득 채우도록 늘려 줘요.

<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>

Normal

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>

Responsive design

align-content 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

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

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.

더 알아보기 (Learn more)