在justify-items和justify-self上进行flex-start和flex-end的目的是什么? [英] What is the purpose of flex-start and flex-end on justify-items and justify-self?
问题描述
据我了解， justify-items 和 justify-self 使用CSS属性在CSS网格布局中，不在Flexbox布局中没有任何作用(与相似，但不同的
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
在flexbox布局中，此属性将被忽略
In flexbox layouts, this property is ignored
，并在然而， justify-items 文档列出了这两个可能的值:
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 */
如果您开始设置justify-items或justify-self属性，这些值还会在Chrome和Firefox等浏览器的开发人员工具中显示为自动完成建议.
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.
如果在Flexbox布局中忽略justify-items和justify-self，为什么这些值仍然存在?他们被吓到了吗?他们是做什么的?
Why do these values exist if justify-items and justify-self are ignored in Flexbox layouts? Are they specced? What do they do?
推荐答案
这是错误. justify-items和justify-self属性不适用于flexbox.
This is an error. The justify-items and justify-self properties do not apply in flexbox.
考虑您的信息来源: MDN Web文档 (以前是Mozilla开发人员网络).该资源尽管通常有用且可靠，但仍表示二手信息.
Consider your source of information: MDN Web Docs (formerly Mozilla Developer Network). This resource, although normally useful and reliable, nonetheless represents second hand information.
MDN页面上的CSS定义基于W3C官方文档. MDN贡献者(人员)读取，过滤和解释W3C数据以在MDN上呈现.因此，MDN信息容易受到人为错误的影响.这就是这里的问题.
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:
此属性为所有 参与该盒子的子盒子(包括匿名盒子) 格式化上下文.
This property specifies the default justify-self for all of the
child boxes (including anonymous boxes) participating in this box’s
formatting context.
好的.因此，我们转到justify-self.
Okay. So let's go to justify-self.
适用于:块级框，绝对定位的框和网格项
Applies to: block-level boxes, absolutely-positioned boxes, and grid items
如前所述，justify-items和justify-self不适用于弹性商品.
As noted, justify-items and justify-self do not apply to flex items.
还请注意，justify-items和justify-self适用于多个Box模型，而不仅仅是CSS Grid.有关更多详细信息，请参见 CSS盒子对齐模块规范.
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.
这篇关于在justify-items和justify-self上进行flex-start和flex-end的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
