justify-content

範例（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>03</div></div>

<div class="flex justify-end-safe ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>03</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 通用類別允許自動調整大小的內容項目填滿容器主軸上的可用空間：

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

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