Flexbox & Grid
justify-content
用於控制 flex 和 grid 項目如何沿容器主軸定位的實用程式。
| 類別 | 樣式 |
|---|---|
justify-start | justify-content: flex-start; |
justify-end | justify-content: flex-end; |
justify-center | justify-content: center; |
justify-between | justify-content: space-between; |
justify-around | justify-content: space-around; |
justify-evenly | justify-content: space-evenly; |
justify-stretch | justify-content: stretch; |
justify-baseline | justify-content: baseline; |
justify-normal | justify-content: normal; |
範例
開始
使用 justify-start 將項目對齊容器主軸的起點
01
02
03
<div class="flex justify-start ..."> <div>01</div> <div>02</div> <div>03</div></div>置中
使用 justify-center 將項目對齊容器主軸的中心
01
02
03
<div class="flex justify-center ..."> <div>01</div> <div>02</div> <div>03</div></div>結束
使用 justify-end 將項目對齊容器主軸的終點
01
02
03
<div class="flex justify-end ..."> <div>01</div> <div>02</div> <div>03</div></div>空間在項目之間
使用 justify-between 將項目沿容器主軸對齊，使每個項目之間有相等的空間
01
02
03
<div class="flex justify-between ..."> <div>01</div> <div>02</div> <div>03</div></div>項目周圍有空間
使用 justify-around 將項目沿容器主軸對齊，使每個項目的每一側都有相等的空間
01
02
03
<div class="flex justify-around ..."> <div>01</div> <div>02</div> <div>03</div></div>空間均勻分佈
使用 justify-evenly 將項目沿容器主軸對齊，使每個項目周圍有相等的空間，同時也考慮到使用 justify-around 時通常會看到的每個項目之間空間加倍的情況
01
02
03
<div class="flex justify-evenly ..."> <div>01</div> <div>02</div> <div>03</div></div>延展
使用 justify-stretch 允許內容項目填滿容器主軸上的可用空間
01
02
03
<div class="grid grid-flow-col ..."> <div>01</div> <div>02</div> <div>03</div></div>一般
使用 justify-normal 將內容項目置於其預設位置，就像未設定任何 justify-content 值一樣
01
02
03
<div class="flex justify-normal ..."> <div>01</div> <div>02</div> <div>03</div></div>響應式設計
前綴a justify-content 實用程式 使用像 md: 這樣的斷點變體，以便僅在中等 螢幕尺寸及以上套用該實用程式
<div class="flex justify-start md:justify-between ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的信息。
