justify-content

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 2015 年 9 月以來，該特性已在各大瀏覽器中可用。

* 此特性的某些部分可能存在不同級別的支援。

CSS 的 justify-content 屬性定義了瀏覽器如何沿著彈性容器的主軸和網格容器及多列容器的行內軸在內容項之間和周圍分配空間。

下面的互動式示例演示瞭如何使用網格佈局來設定 justify-content 的一些值。

試一試

justify-content: start;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 220px;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  row-gap: 10px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

語法

css

/* Positional alignment */
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;

/* Overflow alignment (for positional alignment only)*/
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

值

start: 專案沿主軸線向對齊容器的起始邊緣緊湊排列。
end: 專案沿主軸線向對齊容器的結束邊緣緊湊排列。
flex-start: 專案沿彈性容器主軸的起始一側，向對齊容器的起始邊緣緊湊排列。這僅適用於彈性佈局專案。對於非彈性容器子項的專案，此值的處理方式與 start 相同。
flex-end: 專案沿彈性容器主軸的末尾一側，向對齊容器的結束邊緣緊湊排列。這僅適用於彈性佈局專案。對於非彈性容器子項的專案，此值的處理方式與 end 相同。
center: 專案沿主軸線向對齊容器的中心緊湊排列。
left: 專案向對齊容器的左邊緣緊湊排列。如果屬性的水平軸與行內軸不平行（例如設定了 flex-direction: column;），此值的行為類似於 start。
right: 專案向對齊容器的右邊緣緊湊排列。如果屬性的軸與行內軸（在網格容器中）或主軸（在彈性盒容器中）不平行，此值的行為類似於 start。
normal: 行為與 stretch 類似，但在具有非 auto 的 column-width 值的多列容器中，列將採用其指定的 column-width，而不是拉伸以填充容器。由於 stretch 在彈性容器中的行為與 start 類似，因此 normal 的行為也與 start 類似。
space-between: 專案在對齊容器中沿主軸均勻分佈。每對相鄰專案之間的間距相等。第一個專案與主軸起始邊緣對齊，最後一個專案與主軸結束邊緣對齊。
space-around: 專案在對齊容器中沿主軸均勻分佈。每對相鄰專案之間的間距相等。第一個專案之前和最後一個專案之後的空白空間等於每對相鄰專案之間間距的一半。如果只有一個專案，它將被居中。
space-evenly: 專案在對齊容器中沿主軸均勻分佈。每對相鄰專案之間的間距、主軸起始邊緣與第一個專案之間的間距、以及主軸結束邊緣與最後一個專案之間的間距都完全相等。
stretch: 如果專案沿主軸的總尺寸小於對齊容器的尺寸，任何尺寸為 auto 的專案的大小都會等量（非按比例）增加，同時仍然遵循 max-height/max-width（或等效功能）施加的約束，使得專案總尺寸剛好填滿對齊容器的主軸。

備註： 對於彈性盒子，stretch 值的行為與 flex-start 或 start 相同。這是因為在彈性盒子中，拉伸是由 flex-grow 屬性控制的。
safe: 如果專案溢位對齊容器，則該專案將按照對齊模式為 start 的方式對齊。所需的對齊方式將不會被實現。
unsafe: 即使專案溢位對齊容器，所需的對齊方式也會被實現。與 safe 不同，safe 會忽略所需的對齊方式以防止溢位。

描述

justify-content 定義於 CSS 盒模型對齊模組中，適用於多列容器、彈性容器和網格容器。該屬性不適用於塊容器，也對其沒有影響。

該屬性與 align-content 屬性共享許多關鍵字值，但並非全部！justify-content 不涉及基線對齊，因此不接受基線值。

在彈性佈局中，該屬性定義了正向可用空間如何在彈性專案之間或周圍沿主軸分佈。此屬性影響一行中元素之間的空間，而不是行與行之間的空間。對齊是在應用了長度和自動外邊距之後進行的，這意味著當一行中的一個或多個彈性專案的 flex-grow 因子大於 0 時，該屬性沒有效果，因為該行上沒有可供分配的空間。此外，由於沿主軸的拉伸由 flex 控制，因此 stretch 值的行為與 flex-start 相同。

在網格佈局中，此屬性在網格列之間或周圍分配可用空間，而不是在網格專案之間。如果網格容器大於網格本身，可以使用 justify-content 屬性沿行內軸對齊網格，從而對齊網格列。

網格的 auto 軌道尺寸（且僅限 auto 軌道尺寸）可以透過 align-content 和 justify-content 屬性進行拉伸。因此，預設情況下，auto 尺寸的軌道將佔用網格容器中的任何剩餘空間。由於網格的行內尺寸必須小於網格容器的行內尺寸才能有空間可供分配，因此在這種情況下該屬性沒有效果。

正式定義

初始值	`normal`
應用於	彈性容器
繼承性	否
計算值	同指定值
動畫型別	離散

正式語法

justify-content = 
  normal                                              |
  <content-distribution>                              |
  <overflow-position>? [ <content-position> | left | right ]  

<content-distribution> = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

<overflow-position> = 
  unsafe  |
  safe    

<content-position> = 
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

示例

基本網格示例

在此示例中，我們有一個比其網格容器窄的網格，並使用 justify-content 在網格列周圍和之間均勻分配可用空間。

HTML

<section> 容器，即我們將要設定的網格容器，有 16 個巢狀的 <div>，它們將成為網格專案。

html

<section class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
</section>

CSS

.container {
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

div {
  line-height: 2em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
}

我們將容器寬度設定為 500px，並指定三列，每列寬 80px，這意味著有 260px 的可用空間可以在它們之間或周圍分配。然後我們設定 justify-content: space-evenly，這意味著每列之前、之間和之後都將有 65px 的空間。

我們設定了不同的寬度（和背景顏色）來演示對齊方式是如何應用於列的。

css

.container {
  display: grid;
  grid: auto-flow / repeat(3, 80px);
  width: 500px;
  justify-content: space-evenly;
}

div {
  background-color: pink;
  width: 80px;
}

div:nth-of-type(n + 9) {
  width: 35px;
  background-color: lightgreen;
}

div:nth-last-of-type(3) {
  width: 250px;
  background-color: lightblue;
}

結果

請注意，justify-contents 對齊的是列，對網格區域中的專案或對齊沒有影響。網格專案，即使是那些溢位其網格單元格的專案，也不會影響列的對齊。

safe 關鍵字

此示例演示了 safe 關鍵字。我們指定了四個居中的彈性專案，不允許換行，結果它們溢位了它們的單行彈性容器。透過在 justify-content 屬性的 center 中新增 safe，溢位的內容表現得就像對齊模式是 start 一樣。

<p><code>justify-content: center;</code></p>
<section class="container safe">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>
<p><code>justify-content: safe center;</code></p>
<section class="container safe-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>
<p><code>justify-content: safe center;</code> with 3 items</p>
<section class="container safe-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</section>

.container {
  margin: 5px auto;
  border: 1px dashed;
  box-sizing: border-box;
  background-color: lightblue;
}

div {
  line-height: 1em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
  background-color: pink;
}

容器設定為 center，除了第一個容器外，其他所有容器都添加了 safe 關鍵字。

css

.container {
  align-items: baseline;
  display: flex;
  width: 350px;
  height: 2em;
}

.safe {
  justify-content: center;
}

.safe-center {
  justify-content: safe center;
}

div {
  flex: 0 0 100px;
}

結果

由於專案溢位了對齊容器，包含 safe 時，對齊模式表現為 start，而 center 對齊未被實現。如果專案不溢位容器，safe 關鍵字沒有效果。

視覺化彈性專案分佈

此示例包含一個多行換行的彈性佈局。第二個彈性專案具有正的 flex 增長因子，消耗了第一行彈性佈局中的所有可用空間。

CSS

#container {
  margin: 5px auto;
  border: 1px dashed black;
  box-sizing: border-box;
}

div {
  line-height: 2em;
  border: 1px solid;
  box-sizing: border-box;
  text-align: center;
}

css

#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between; /* Can be changed in the live sample */
  width: 510px;
}

div {
  line-height: 2em;
  flex: 0 0 120px;
  background-color: pink;
}

div:nth-of-type(2) {
  flex-grow: 1;
  background-color: yellow;
}

div:nth-of-type(n + 9) {
  flex: 0 0 35px;
  background-color: lightgreen;
}
div:last-of-type {
  flex: 0 0 300px;
  background-color: lightblue;
}

<section id="container">
  <div>A</div>
  <div>GROW</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
  <div>K</div>
  <div>L</div>
  <div>M</div>
  <div>N</div>
  <div>O</div>
  <div>P</div>
</section>
<select id="justifyContent">
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="space-between" selected>space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
</select>

const justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", (evt) => {
  document.getElementById("container").style.justifyContent = evt.target.value;
});

結果

從下拉選單中選擇不同的關鍵字，以視覺化不同的 justify-content 關鍵字值。因為第一行上的一個專案可以增長，所以該行上沒有可供 justify-content 屬性分配的可用空間。對於 space-between 值，每行的第一個專案與主軸起始邊緣對齊，最後一個專案與主軸結束邊緣對齊。因此，如果一行只有一個專案，它將與主軸起始邊緣對齊（如最後一行所示）。對於其他 space-* 值（如 space-evenly 和 space-around），情況並非如此，它們會將只有一個專案的彈性行居中。

規範

規範
CSS Box Alignment Module Level 3 # align-justify-content
CSS 彈性盒子佈局模組第 1 級 # justify-content-property

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年7月14日⁩，由 MDN 貢獻者們更新。

在 GitHub 上檢視此頁面 • 報告此內容的問題