align-content

用於控制多列 flex 和 grid 容器中列如何定位的通用類別。

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;

範例（Examples）

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

在變體文件中了解更多關於使用變體的資訊。