place-items 和 align-items 有什么区别? [英] What is the difference between place-items and align-items?

问题描述

想知道使用有什么区别

display: flex;对齐项目:居中；

或

display: flex;地点项目:中心；

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

大小写(应该有固定宽度的容器，中间对齐图标)

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

解决方案

CSS place-items 速记属性分别设置 align-items 和 justify-items 属性.如果没有设置第二个值，第一个值也被用于它.^ref

所以不，它们不一样.

---

来自规范:

<块引用>

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

即使在实际的 Flexbox 迭代中 justify-items 没有定义并且不会产生任何影响，你也不应该认为它们是一样的，因为未来可能会发生变化.

<块引用>

justify-items

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

和

<块引用>

证明自己

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

和

<块引用>

6.1.4.弹性项目

此属性不适用于弹性项目，因为主轴上有多个项目.参见 flex 拉伸和 justify-content 主轴对齐.[CSS-FLEXBOX-1]

Would like to know what's the difference between using

display: flex;
align-items: center;

or

display: flex;
place-items: center;

Visually it looks the same, place-items has 90% browser support, align-items has 92%.

Case (should have fixed width container, and align icon in the middle)

<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

So no, they are not the same.

---

And from the specification:

This shorthand property sets both the align-items and justify-items properties in a single declaration. The first value is assigned to align-items. The second value is assigned to justify-items; if omitted, it is copied from the first value.

Even if in the actual Flexbox iteration justify-items is not defined and will have no effect, you should not consider them the same because things may change in the future.

justify-items

This property specifies the default justify-self for all of the child boxes (including anonymous boxes) participating in this box’s formatting context. Values have the following meanings

And

justify-self

Justifies the box (as the alignment subject) within its containing block (as the alignment container) along the inline/row/main axis of the alignment container

and

6.1.4. Flex Items

This property does not apply to flex items, because there is more than one item in the main axis. See flex for stretching and justify-content for main-axis alignment. [CSS-FLEXBOX-1]

这篇关于place-items 和 align-items 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！