place-content

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

place-content CSS 簡寫屬性允許您在相關的佈局系統（例如網格或Flexbox）中同時沿塊方向和行方向對齊內容（即align-content和justify-content屬性）。

試一試

place-content: end space-between;

place-content: space-around start;

place-content: start space-evenly;

place-content: end center;

place-content: end;

<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;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  height: 180px;
  width: 220px;
}

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

構成屬性

此屬性是以下 CSS 屬性的簡寫：

語法

css

/* Positional alignment */
/* align-content does not take left and right values */
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

/* Baseline alignment */
/* justify-content does not take baseline values */
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

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

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

第一個值是align-content屬性值，第二個值是justify-content屬性值。

注意：如果第二個值不存在，則第一個值用於兩者，前提是它是兩者的有效值。如果它對其中一個或另一個無效，則整個值將無效。

值

start: 專案在相應的軸上緊密地堆疊在對齊容器的起始邊緣。
end: 專案在相應的軸上緊密地堆疊在對齊容器的結束邊緣。
flex-start: 專案根據彈性容器的主軸起始或交叉軸起始側，緊密地堆疊在對齊容器的邊緣。這僅適用於彈性佈局專案。對於非彈性容器子項的專案，此值被視為 start。
flex-end: 專案根據彈性容器的主軸結束或交叉軸結束側，緊密地堆疊在對齊容器的邊緣。這僅適用於彈性佈局專案。對於非彈性容器子項的專案，此值被視為 end。
center: 專案被緊密地打包到對齊容器的中心。
left: 專案被緊密地打包到對齊容器的左邊緣。如果屬性的軸向與內聯軸不平行，則此值的行為類似於 start。
right: 在適當的軸向上，專案被緊密地打包到對齊容器的右邊緣。如果屬性的軸向與內聯軸不平行，則此值的行為類似於 start。
space-between: 專案在對齊容器內均勻分佈。每對相鄰專案之間的間距相同。第一個專案與主軸起始邊緣齊平，最後一個專案與主軸結束邊緣齊平。
baseline、first baseline、last baseline: 指定參與第一條或最後一條基線對齊：將盒的第一條或最後一條基線集的對齊基線，與基線共享組中所有盒的共享第一條或最後一條基線集中的相應基線對齊。first baseline 的回退對齊方式是 start，last baseline 的是 end。
space-around: 專案在對齊容器內均勻分佈。每對相鄰專案之間的間距相同。第一個專案之前和最後一個專案之後的空白空間等於每對相鄰專案之間空間的一半。
space-evenly: 專案在對齊容器內均勻分佈。每對相鄰專案之間、主軸起始邊緣與第一個專案之間，以及主軸結束邊緣與最後一個專案之間的間距都完全相同。
stretch: 如果專案的組合大小小於對齊容器的大小，則任何 auto 大小的專案都會按相同比例（而非按比例）增加其大小，同時仍遵守 max-height/max-width（或等效功能）施加的約束，以便組合大小正好填滿對齊容器。
safe: 與對齊關鍵字一起使用。如果所選關鍵字意味著專案會溢位對齊容器導致資料丟失，則專案將改為像對齊模式為 start 一樣對齊。
unsafe: 與對齊關鍵字一起使用。無論專案和對齊容器的相對大小如何，也無論是否可能發生導致資料丟失的溢位，都會遵循給定的對齊值。

正式定義

初始值	作為簡寫中的每個屬性 `align-content`: `normal` `justify-content`: `normal`
應用於	多行彈性容器
繼承性	否
計算值	作為簡寫中的每個屬性 `align-content`: as specified `justify-content`: as specified
動畫型別	離散

正式語法

place-content = 
  <'align-content'> <'justify-content'>?  

<align-content> = 
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>  

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

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

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

<overflow-position> = 
  unsafe  |
  safe    

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

示例

在彈性容器中放置內容

HTML

html

<div id="container">
  <div class="small">Lorem</div>
  <div class="small">Lorem<br />ipsum</div>
  <div class="large">Lorem</div>
  <div class="large">Lorem<br />ipsum</div>
  <div class="large"></div>
  <div class="large"></div>
</div>

<code>writing-mode:</code
><select id="writingMode">
  <option value="horizontal-tb" selected>horizontal-tb</option>
  <option value="vertical-rl">vertical-rl</option>
  <option value="vertical-lr">vertical-lr</option>
  <option value="sideways-rl">sideways-rl</option>
  <option value="sideways-lr">sideways-lr</option></select
><code>;</code><br />

<code>direction:</code
><select id="direction">
  <option value="ltr" selected>ltr</option>
  <option value="rtl">rtl</option></select
><code>;</code><br />

<code>place-content:</code
><select id="alignContentAlignment">
  <option value="normal">normal</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</option>
  <option value="baseline">baseline</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly" selected>space-evenly</option>
  <option value="stretch">stretch</option>
  <option value="center">center</option>
  <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="safe">safe</option>
  <option value="unsafe">unsafe</option>
</select>
<select id="justifyContentAlignment">
  <option value="normal">normal</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
  <option value="center" selected>center</option>
  <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="left">left</option>
  <option value="right">right</option>
  <option value="safe">safe</option>
  <option value="unsafe">unsafe</option></select
><code>;</code>

function update() {
  document.getElementById("container").style.placeContent =
    `${document.getElementById("alignContentAlignment").value} ` +
    `${document.getElementById("justifyContentAlignment").value}`;
}

const alignContentAlignment = document.getElementById("alignContentAlignment");
alignContentAlignment.addEventListener("change", update);

const justifyContentAlignment = document.getElementById(
  "justifyContentAlignment",
);
justifyContentAlignment.addEventListener("change", update);

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

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

CSS

css

#container {
  display: flex;
  height: 240px;
  width: 240px;
  flex-wrap: wrap;
  background-color: #8c8c8c;
  writing-mode: horizontal-tb; /* Can be changed in the live sample */
  direction: ltr; /* Can be changed in the live sample */
  place-content: flex-end center; /* Can be changed in the live sample */
}

div > div {
  border: 2px solid #8c8c8c;
  width: 50px;
  background-color: #a0c8ff;
}

.small {
  font-size: 12px;
  height: 40px;
}

.large {
  font-size: 14px;
  height: 50px;
}

結果

規範

規範
CSS Box Alignment Module Level 3 # place-content

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由MDN 貢獻者於2025 年 7 月 14 日修改。

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