justify-items 如何在 display:block 元素上工作 [英] How does justify-items work on display:block elements
问题描述
的 MDN 文档justify-items 指出:
在块级布局中，它会在内联轴上对齐包含块内的项目.
现在，我认为此属性仅用于 display:flex 或 display:grid 元素，但规范指出它可以用于所有元素.
所以我想尝试一下它是如何与 display:block 一起工作的，但不幸的是我无法让它以任何方式工作.它什么都不做.
所以我的问题是:有人可以提供一个示例，如何在 display:block 元素上使用 justify-items?
但是规范声明它可以用于所有元素.
不，这不是规范.这是规范:https://drafts.csswg.org/css-align-3/#propdef-justify-items 你会注意到它仍然是一个草稿.所以是的，它意味着适用于所有元素，但还没有.
<块引用>这是编辑草稿的公开副本.仅供讨论，可能随时更改.它在此处的发布并不意味着 W3C 对其内容的认可.除了正在进行的工作之外，请勿引用此文档.
<小时><块引用>
CSS 级别 1 和 2 允许通过 text-align 对齐文本并通过平衡自动边距对齐块.但是，除了在表格单元格中，垂直对齐是不可能的.随着 CSS 添加更多功能，在不同维度对齐框的能力变得更加重要.该模块尝试创建一个内聚且通用的框对齐模型，以在所有 CSS 中共享.
实际上，正如您所知，它仅在 Grid 和 Flex 布局中受支持.这在它们各自的规范中有所描述，而不是上述规范:
https://www.w3.org/TR/css-flexbox-1/
https://www.w3.org/TR/css-grid-1/
<小时>您还可以查看 中的 MDN 链接浏览器兼容性部分，您会发现仅支持 Grid 和 Flex 布局.
<小时>MDN 是一个很好的参考，但您需要能够遵循最后提供的规范链接以获得完整的信息.
The MDN documentation of justify-items states that:
In block-level layouts, it aligns the items inside their containing block on the inline axis.
Now, I thought that this property is intended to be used only in display:flex or display:grid elements, but the specification states that it can be used on all elements.
So I wanted to try out how does it work with a display:block, but unfortunately I can't make it work in any way. It just does nothing.
So my question is: can someone please provide an example how justify-items can be used on a display:block element?
but the specification states that it can be used on all elements.
No, this is not the specification. Here is the specification: https://drafts.csswg.org/css-align-3/#propdef-justify-items and you will notice that it's still a draft. So yes it's meant to work with all elements but not yet.
This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.
CSS Levels 1 and 2 allowed for the alignment of text via text-align and the alignment of blocks by balancing auto margins. However, except in table cells, vertical alignment was not possible. As CSS adds further capabilities, the ability to align boxes in various dimensions becomes more critical. This module attempts to create a cohesive and common box alignment model to share among all of CSS.
Actually, it's only supported inside Grid and Flex layout like you know. This is described in their respective Specifications not the above one:
https://www.w3.org/TR/css-flexbox-1/
https://www.w3.org/TR/css-grid-1/
You can also check the MDN link in the browser compatibility section and you will find support for only Grid and Flex layout.
The MDN is a good reference but you need to be able to follow the specification links provided at the end to have a complete information.
这篇关于justify-items 如何在 display:block 元素上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
