align-content

align-content

用於控制多行彈性容器和網格容器中行定位方式的工具程式。

類別樣式

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 將容器中的行靠在交叉軸的起點對齊

<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 讓內容項目沿著容器的交叉軸填滿可用空間

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

前綴將 align-content 工具程式與斷點變體（如 md:）搭配使用，僅在中型螢幕尺寸及以上時套用工具程式

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

在變體文件中深入瞭解如何使用變體。