放置项目和对齐项目之间有什么区别

想知道使用有什么区别

display: flex;
align-items: center;

或

display: flex;
place-items: center;

从视觉上看，它看起来是一样的，放置项目有90%的浏览器支持，对齐项目有92%。

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

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

CSSplace-items简写属性分别设置align-items和justify-items属性。如果没有设置第二个值，第一个值也会用于它。^ref

所以不，它们不一样。

根据规范：

此简写属性在单个声明中设置align项和justify项属性。第一个值用于对齐项目。第二个值用于证明项目的合理性；如果省略，则从第一个值复制。

即使在实际的Flexbox迭代中没有定义justify-items，也不应该认为它们是一样的，因为未来可能会发生变化。

验证项目

此属性为参与此框的格式化上下文的所有子框(包括匿名框(指定默认的自对齐。值具有以下含义

和

证明自身

沿着对齐容器的内联/行/主轴，在其包含块(作为对齐容器(内对齐方框(作为对齐对象(

和

6.1.4.弹性项目

此属性不适用于弹性项目，因为主轴中有多个项目。请参见flex以进行拉伸，并对齐内容以进行主轴对齐。[CSS-FLEXBOX-1]

相关内容