place-items

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

CSS 中的 place-items 是一个简写属性 ,它允许你在相关的布局(如 GridFlexbox)中可以同时沿着块级和内联方向对齐元素 (例如:align-itemsjustify-items 属性) 。如果未提供第二个值,则第一个值作为第二个值的默认值。

尝试一下

构成属性

该属性是以下两个 CSS 属性的简写:

语法

css
/* Keyword values */
place-items: auto center;
place-items: normal start;

/* Positional alignment */
place-items: center normal;
place-items: start auto;
place-items: end normal;
place-items: self-start auto;
place-items: self-end normal;
place-items: flex-start auto;
place-items: flex-end normal;
place-items: left auto;
place-items: right normal;

/* Baseline alignment */
place-items: baseline normal;
place-items: first baseline auto;
place-items: last baseline normal;
place-items: stretch auto;

/* Global values */
place-items: inherit;
place-items: initial;
place-items: unset;

auto

auto 实际的值继承父自元素的 justify-items 值,除非该元素没有父元素或是用了绝对定位。在这些示例中,auto 表示 normal

normal

normal 的效果取决于我们使用哪种布局方式:

  • 在块级布局中,normalstart 一样。
  • 在绝对定位布局中,关键字在被替换的绝对定位元素上的行为类似于 start,在所有其他绝对定位的元素上表现类似 stretch
  • 在表格单元格布局中,此关键字没有意义,因为该属性被忽略
  • 在 flexbox 布局中,此关键字没有意义,因为该属性被忽略
  • 在 grid 布局中,此关键字和 stretch 的行为相似,但是具有宽高比和固有尺寸的元素行为和 start 相似。
start

在适当的轴线上,元素块沿着对齐容器的起始边缘对齐。

end

在适当的轴线上,元素块沿着对齐容器的结束边缘对齐。

flex-start

对齐方式取决于 flex 容器的开始方向。(水平和垂直两个方向) 这只对 flex 布局元素生效,对于不是 flex 容器的子元素,它被视为 start

flex-end

对齐方式取决于 flex 容器的结束方向。(水平和垂直两个方向) 这只对 flex 布局元素生效,对于不是 flex 容器的子元素,它被视为 end。

self-start

沿着轴线的头部对齐。

self-end

沿着轴线的尾部对齐。

center

沿着对齐容器的中心对齐。

left

沿着对齐容器的左侧对齐,如果属性的轴不与内联轴平行,则该值的行为和 start 类似。

沿着对齐容器的右侧对齐,如果属性的轴不与内联轴平行,则该值的行为和 start 类似。

baseline first baseline last baseline

指定参与第一个或最后一个基线对齐:元素的第一个或最后一个基线集的对齐基线与基线共享组中所有框共享的第一个或最后一个基线集中相应的基线对齐。 first baseline 的回退对齐方式为 startlast baseline 则为 end

stretch

如果子项加起来的尺寸小于对齐容器的尺寸,则任何未尺寸为 auto 的项将增加同等的大小(不是按比例),但也会受到 max-height/max-width (或等同的功能)的限制,因此所有项刚好能填满对齐容器。

形式定义

初始值该简写所对应的每个属性:
适用元素所有元素
是否是继承属性
计算值该简写所对应的每个属性:
动画类型离散值

形式语法

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

<align-items> =
normal |
stretch |
<baseline-position> |
[ <overflow-position>? <self-position> ] |
anchor-center

<justify-items> =
normal |
stretch |
<baseline-position> |
<overflow-position>? [ <self-position> | left | right ] |
legacy |
legacy && [ left | right | center ] |
anchor-center

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

<overflow-position> =
unsafe |
safe

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

示例

在弹性容器中排列元素

CSS

css
#container {
  height: 200px;
  width: 240px;
  place-items: center; /* You can change this value by selecting another option in the list */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

结果

规范

Specification
CSS Box Alignment Module Level 3
# place-items-property

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
place-items
anchor-center
Experimental
Supported in Flex Layout
Supported in Grid Layout

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

参见