View in EnglishAlways switch to English

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 2020年1月.

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

CSS 中的place-items 是一个简写属性，它允许你在相关的布局（如网格或弹性盒子）中可以同时沿着块级和内联方向对齐元素（例如：align-items 和justify-items 属性）。如果未提供第二个值，则第一个值作为第二个值的默认值。

尝试一下

place-items: center stretch;

place-items: center start;

place-items: start end;

place-items: end center;

<section>  <div>    <div>      <div>One</div>      <div>Two</div>      <div>Three</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-template-columns: 1fr 1fr;  grid-auto-rows: 80px;  grid-gap: 10px;  width: 220px;}#example-element > div {  background-color: rgba(0, 0, 255, 0.2);  border: 3px solid blue;}

构成属性

该属性是以下两个 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 的效果取决于我们使用哪种布局方式：

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

start

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

end

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

flex-start

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

flex-end

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

沿着轴线的头部对齐。

沿着轴线的尾部对齐。

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

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

right

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

baseline first baselinelast baseline

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

stretch

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

形式定义

初始值	该简写所对应的每个属性： `align-items`:`normal` `justify-items`:`legacy`
适用元素	所有元素
是否是继承属性	否
计算值	该简写所对应的每个属性： `align-items`: as specified `justify-items`: as specified
动画类型	离散值

形式语法

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

示例

在弹性容器中排列元素

div > div {  box-sizing: border-box;  border: 2px solid #8c8c8c;  width: 50px;  display: flex;  align-items: center;  justify-content: center;}#item1 {  background-color: #8cffa0;  min-height: 30px;}#item2 {  background-color: #a0c8ff;  min-height: 50px;}#item3 {  background-color: #ffa08c;  min-height: 40px;}#item4 {  background-color: #ffff8c;  min-height: 60px;}#item5 {  background-color: #ff8cff;  min-height: 70px;}#item6 {  background-color: #8cffff;  min-height: 50px;  font-size: 30px;}select {  font-size: 16px;}.row {  margin-top: 10px;}

<div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div>  <div>6</div></div><div>  <label for="display">display: </label>  <select>    <option value="flex">flex</option>    <option value="grid">grid</option>  </select></div><div>  <label for="values">place-items: </label>  <select>    <option value="start">start</option>    <option value="center">center</option>    <option value="end">end</option>    <option value="left">left</option>    <option value="right">right</option>    <option value="auto center">auto center</option>    <option value="normal start">normal start</option>    <option value="center normal">center normal</option>    <option value="start auto">start auto</option>    <option value="end normal">end normal</option>    <option value="self-start auto">self-start auto</option>    <option value="self-end normal">self-end normal</option>    <option value="flex-start auto">flex-start auto</option>    <option value="flex-end normal">flex-end normal</option>    <option value="left auto">left auto</option>    <option value="right normal">right normal</option>    <option value="baseline normal">baseline normal</option>    <option value="first baseline auto">first baseline auto</option>    <option value="last baseline normal">last baseline normal</option>    <option value="stretch auto">stretch auto</option>  </select></div>

var values = document.getElementById("values");var display = document.getElementById("display");var container = document.getElementById("container");values.addEventListener("change", function (evt) {  container.style.placeItems = evt.target.value;});display.addEventListener("change", function (evt) {  container.className = evt.target.value;});

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);}