DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!
CSS 中的 place-content
属性是 align-content
和 justify-content
属性的简写形式,将它们组合到 CSS 网格和 Flexbox 布局中的单个声明中,其中 align-content
和 justify-content
是在块和内联方向上对齐单个项目的值。
.element {
display: flex;
place-content: start space-evenly;
}
因此,与其像这样写出 align-content
和 justify-content
.item {
display: grid;
align-content: self-start;
justify-content: center;
}
…我们可以声明 place-content
,它接受这两个值
.item {
display: grid;
place-content: self-start center;
}
如果只提供一个值,则它会设置两个属性。 例如,这
.item {
display: grid;
place-content: self-start;
}
…与编写以下内容相同
.item {
display: grid;
align-content: self-start;
justify-content: self-start;
}
语法
这只是说 place-content
接受两个值,第一个是 align-content
属性值,第二个是 justify-content
属性值的一种花哨说法。
place-content: <'align-content'> <'justify-content'>?
- 初始值:
normal
- 应用于:块级容器、弹性容器和网格容器
- 继承:否
- 计算值:按指定
- 动画类型:离散
值
从 MDN 直接提取 的一些很棒的值和值对示例
/* 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: unset;
有时有视觉效果会有所帮助
align-content
justify-content
位置对齐值
当我们谈论“位置”对齐时,我们指的是指示容器项对齐哪个边的命名值。 所有这些值都适用于 align-content
和 justify-content
,但 left
和 right
除外,它们不受 justify-content
支持。
self-start
:这将元素与容器的起始边对齐。self-end
:这将元素与容器的结束边对齐。flex-start
:这用于弹性布局中,其中元素与容器的起始边对齐。flex-end
:这用于弹性布局中,其中元素与容器的结束边对齐。center
:这将元素在其容器内居中。left
:这将元素与容器的左边缘对齐。right
:这将元素与容器的右边缘对齐。
基线对齐值
基线以一种将顶部或底部边缘对齐的方式,通过匹配组内所有元素的基线来对齐所有元素(即一行内的单元格)。
baseline
:这通过将元素的基线与组的基线匹配来对齐组内的元素。 如果单独使用baseline
,则默认为first
。first baseline
:这将框的第一个基线集的基线与基线共享组中所有框的共享第一个基线集中的相应基线对齐。 回退对齐方式是start
。last baseline
:这将框的最后一个基线集的基线与基线共享组中所有框的共享最后一个基线集中的相应基线对齐。 回退对齐方式是end
。
分布式对齐值
元素应该如何在容器中分布? 它们应该散开吗? 它们应该拉伸以填充可用空间吗? 以下是这些值定义的内容。
space-between
:元素在对齐容器内均匀分布。 每对相邻项目之间的间距相同。space-around
: 元素在对齐容器内均匀分布。每对相邻项目之间的间距相同。space-evenly
: 元素在对齐容器内均匀分布。每对元素之间的间距完全相同。stretch
: 用于在两个轴上拉伸项目,同时仍尊重max-height
和max-width
属性(或等效功能)施加的约束。
示例
place-content: space-around start;
元素周围有呼吸空间 (space-around
),并且它们与容器的起始边缘 (start
) 对齐。
place-content: end center;
元素在块方向上与容器的结束边缘 (end
) 对齐,然后在内联方向上居中。
place-content: space-between center;
在这里,我们在块方向上将元素推到容器的相对边缘 (space-between
),然后在内联方向上居中 (center
) 它们。
演示
在下面的演示中尝试使用控件,看看更改 place-content
的值如何改变元素的对齐方式。
浏览器支持
此属性包含在CSS Box Alignment Model Level 3 规范中,该规范目前处于工作草案状态。
浏览器支持在 CSS Grid 和 Flexbox 布局中都很广泛且稳定。
网格支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 79+ | 53+ | 59+ | 11+ | 46+ |
Safari iOS | Chrome Android | Firefox Android | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
90+ | 87+ | 90+ | 11+ | 59+ |
Flexbox 支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 79+ | 45+ | 59+ | 9+ | 46+ |
Safari iOS | Chrome Android | Firefox Android | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
14.5+ | 90+ | 87+ | 90+ | 62+ |