1

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?

Improve this question
6
  • block-level layouts doesn't mean elements styled as display: block. An element with display: flex or display: table is also a block level element. Commented Feb 2, 2019 at 7:13
  • It sounds like you're trying to get something specific working? Mind just telling us what you're trying to do? That might be more helpful for you ... and us :) Commented Feb 2, 2019 at 7:15
  • @MohammadUsman Oh, you're right, my bad. I've edited my question to be more specific what I'd like to know. Commented Feb 2, 2019 at 7:40
  • @CreationTribe No, actually I don't want anything specific working. I've just stumbled upon this documentation and was curious about how does it work, but I couldn't make justify-items work with a display:block element in any ways - that's the question (I've edited it to be more specific) :) Commented Feb 2, 2019 at 7:42
  • developer.mozilla.org/en-US/docs/Web/CSS/justify-items Just looking over this - I've never personally used it, but it looks like a very specific case use. I don't think you can just apply it to something. It's a very specific type of setup. I'd just recommend using it for what it has been designed for. :) Commented Feb 2, 2019 at 8:02

1 Answer 1

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

See also: github.com/w3c/csswg-drafts/issues/10388
It's 2025 now and the draft became recommendation. Chromia (v136) allow it for display:block elements, for Firefox I am not quite sure because I am restricted to an v128 ESR.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.