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