CSS place-content 属性

Pagsasakop at paggamit

place-content Ang mga katangian ay ginagamit sa layout ng flexbox at grid, at ay isang maikling paraan ng mga sumusunod na katangian:

Kung ang halaga ng place-content ay may dalawang halaga:

place-content: start center;
  • Ang halaga ng align-content ay 'start'
  • Ang halaga ng justify-content ay 'center'

Kung ang halaga ng place-content ay may isang solong halaga:

place-content: end;
  • Kung ang halaga ng align-content at justify-content ay 'end'

Mga halimbawa

Halimbawa 1

Tinatayang ang pagkakasunod-sunod ng pagkalakas sa ilalim ng container ng pagkalakas, at ginawang pantay ang paghahalaga ng puwang sa paraan ng paghahatid sa horizontal na direksyon:

#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 弹性盒佈局

參考：Atributo ng align-content ng CSS

參考：CSS justify-content 属性

參考：HTML DOM alignContent 属性