flex-start 和 flex-end 在 justify-items 和 justify-self 上的目的是什么? [英] What is the purpose of flex-start and flex-end on justify-items and justify-self?

问题描述

据我所知，justify-items 和 justify-self CSS 属性用于 CSS 网格布局，在 Flexbox 布局中没有任何影响(不像不同的justify-content 财产).事实上，MDN 在 justify-items 和 justify-self 的文档中都说

<块引用>

在 flexbox 布局中，此属性被忽略

并且在 Flexbox 中的框对齐 页面.

然而，神秘的是，justify-items 文档列出了这两个可能的值:

<块引用>

justify-items: flex-start;/* 从一开始就打包 flex 项目 */justify-items: flex-end;/* 从最后打包 flex 项目 */

如果您开始设置 justify-items 或 justify-self 属性，这些值也会在 Chrome 和 Firefox 等浏览器的开发人员工具中显示为自动完成建议.

如果 justify-items 和 justify-self 在 Flexbox 布局中被忽略，为什么这些值存在?他们是专精吗?他们是做什么的?

解决方案

这是一个错误.justify-items 和 justify-self 属性不适用于 flexbox.

考虑您的信息来源:MDN 网络文档(以前的 Mozilla 开发者网络).该资源虽然通常有用且可靠，但仍代表二手信息.

MDN 页面上的 CSS 定义基于 W3C 官方文档.MDN 贡献者(人)阅读、过滤和解释 W3C 数据以在 MDN 上进行展示.因此，MDN 信息容易出现人为错误.这就是问题所在.

如果您直接访问规范，您会找到正确的信息:

<块引用>

7.1.内联/主轴对齐:justify-items财产

这个属性指定了所有的默认justify-self参与此框的子框(包括匿名框)格式化上下文.

好的.所以让我们去justify-self.

<块引用>

6.1.内联/主轴对齐:justify-self财产

适用于:块级框、绝对定位框和网格项

如前所述，justify-items 和 justify-self 不适用于弹性项目.

另请注意，justify-items 和 justify-self 适用于多个框模型，而不仅仅是 CSS Grid.有关更多详细信息，请参阅 CSS 框对齐模块规范.

From what I know, the justify-items and justify-self CSS properties are used in CSS Grid layouts, and don't have any effect in Flexbox layouts (unlike the similarly-named but different justify-content property). Indeed, MDN says in the docs for both justify-items and justify-self that

In flexbox layouts, this property is ignored

and has a whole section with the heading There is no justify-self in Flexbox on the Box Alignment in Flexbox page.

And yet, mysteriously, the justify-items docs list these two possible values:

justify-items: flex-start; /* Pack flex items from the start */
justify-items: flex-end;   /* Pack flex items from the end */

These values also show up as autocomplete suggestions in the developer tools of browsers like Chrome and Firefox if you start setting a justify-items or justify-self property.

Why do these values exist if justify-items and justify-self are ignored in Flexbox layouts? Are they specced? What do they do?

解决方案

This is an error. The justify-items and justify-self properties do not apply in flexbox.

Consider your source of information: MDN Web Docs (formerly Mozilla Developer Network). This resource, although normally useful and reliable, nonetheless represents second hand information.

The CSS definitions on MDN pages are based on official W3C documentation. MDN contributors (people) read, filter and interpret W3C data for presentation on MDN. As a result, MDN info is subject to human error. That's the problem here.

If you go directly to the spec, you'll find the correct information:

7.1. Inline/Main-Axis Alignment: the justify-items property

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

Okay. So let's go to justify-self.

6.1. Inline/Main-Axis Alignment: the justify-self property

Applies to: block-level boxes, absolutely-positioned boxes, and grid items

As noted, justify-items and justify-self do not apply to flex items.

Also note that justify-items and justify-self are applicable to multiple box models, not just CSS Grid. For more details see the CSS Box Alignment Module specification.

这篇关于flex-start 和 flex-end 在 justify-items 和 justify-self 上的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！