放置项和对齐项有什么区别？

想知道使用有什么区别

display: flex;
align-items: center;

or

display: flex;
place-items: center;

视觉上看起来是一样的，place-items 有 90% 的浏览器支持，align-items 有 92%。

案例（应该有固定宽度的容器，并在中间对齐图标）

<div class="container">
<div class="icon> <svg ... /> </div>
</div>

The CSS place-items shorthand property sets the align-items and justify-items properties, respectively. If the second value is not set, the first value is also used for it.^{ref https://developer.mozilla.org/en-US/docs/Web/CSS/place-items}

所以不，它们不一样。

并从规格 https://drafts.csswg.org/css-align-3/#place-items-property:

此简写属性在单个声明中设置align-items 和justify-items 属性。第一个值分配给align-items。第二个值分配给 justify-items；如果省略，则从第一个值复制。

即使在实际的 Flexbox 迭代中justify-items未定义并且不会产生任何影响，您不应将它们视为相同，因为将来情况可能会发生变化。

证明项目

此属性为参与此框格式化上下文的所有子框（包括匿名框）指定默认的 justify-self。数值有以下含义

And

自我辩护

沿对齐容器的内联/行/主轴对齐其包含块（作为对齐容器）内的框（作为对齐主题）

and

6.1.4.弹性项目

此属性不适用于弹性项目，因为主轴中有多个项目。有关拉伸，请参阅 flex ；有关主轴对齐，请参阅 justify-content 。 [CSS-FLEXBOX-1]