CSS place-content รายละเอียด

การกำหนดและวิธีใช้

place-content เครื่องมือใช้สำหรับเฟล็กซ์บอกซ์ (flexbox) และเกี่ยวกับเกณฑ์ (grid) และเป็นชื่อย่อของคุณสมบัติดังนี้

ถ้า place-content มีค่าสองตัวเลข

place-content: start center;
  • ค่าของ align-content จะเป็น 'start'
  • ค่าของ justify-content จะเป็น 'center'

ถ้า place-content มีค่าเพียงหนึ่งตัวเลขเดียว

place-content: end;
  • ค่าของ align-content และ justify-content จะเป็น 'end'

ตัวอย่าง

ตัวอย่าง 1

จัดระยะทางห่างกันของโปรเจกต์เท้าเฟล็กซ์ในทางน้ำเงินที่ด้านล่างของตัวแทนเฟล็กซ์และในทางน้ำตางด้านข้างที่เท้าเฟล็กซ์ระหว่างกันมีระยะทางเท่ากัน

#container {
  display: flex;
  place-content: end space-between;
}

親自試試

例子 2：網格佈局

在塊方向上的額外空間均勻分布在每個網格項目周圍，且網格項目在行內方向上居中对齊：

#container {
  display: grid;
  place-content: space-around center;
}

親自試試

CSS 語法

place-content: normal|value|initial|inherit;

屬性值

值 描述
normal

默認值。取決於佈局上下文。

等於於不為 align-content 和 justify-content 設定屬性值。
stretch

網格：如果未設定大小，則網格項目會拉伸以填滿網格容器。

彈性盒：如果彈性項目在交叉軸上未指定大小，則會在交叉軸上拉伸以填滿彈性容器。
start 將項目對齊到容器的開始位置。
end 將項目對齊到容器的結束位置。
center 將項目對齊到容器的中心位置。
space-between 在容器的兩個軸上均勻分布可用空間，使項目之間的間距相等。
space-around 在容器的兩個軸上均勻分布可用空間，使每個項目周圍的間距相等。
space-evenly 在容器的兩個軸上均勻分布項目。
overflow-alignment

'safe'：如果內容溢出，則將項目對齊設定為 'start'。

'unsafe'：無論項目內容是否溢出，都保持對齊值不變。
initial 將此屬性設定為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： normal
繼承性： 否
動畫製作： 不支援。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.placeContent="end space-around"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
59.0 79.0 53.0 11.0 46.0

相關頁面

教程：CSS 網格佈局

教程：CSS 弹性盒佈局

參考：คุณสมบัติ align-content CSS

參考：CSS justify-content รายการ

參考：ตัวแปร alignContent ใน HTML DOM