How does justify-items work on display:block elements

Question

The MDN documentation of justify-items states that:

In block-level layouts, it aligns the items inside their containing block on the inli

Answer 1

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.