How Does Justify-Items Work on Display:Block Elements

How does justify-items work on display:block elements

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.

Why do I have to display:block items so they align below each other in a flexbox?

Your #flex element has only one child: #something, so the flex settings hardly have an effect, they definitely don't affect the grandchildren input and button, but only the direct child (#something). Apply your settings to #something - this will have the effect you are asking for since it affects the direct children of #something:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

#something {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-items: center;
  height: 90vh;
}

<div id='flex'>
  <form id='something'>
    <input type='email' />
    <input type='password' />
    <button>Entrar</button>
  </form>
</div>

text-align: justify; inline-block elements properly?

Updated the "Future" solution info below; still not yet fully supported.

Present Workaround (IE8+, FF, Chrome Tested)

See this fiddle.

Relevant CSS

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

Explanation

The display: block on the :before element with the negative bottom margin pulls the lines of text up one line height which eliminates the extra line, but displaces the text. Then with the position: relative on the inline-block elements the displacement is counteracted, but without adding the additional line back.

Though css cannot directly access a line-height "unit" per se, the use of em in the margin-bottom and top settings easily accommodates any line-height given as one of the multiplier values. So 1.2, 120%, or 1.2em are all equal in calculation with respect to line-height, which makes the use of em a good choice here, as even if line-height: 1.2 is set, then 1.2em for margin-bottom and top will match. Good coding to normalize the look of a site means at some point line-height should be defined explicitly, so if any of the multiplier methods are used, then the equivalent em unit will give the same value as the line-height. And if line-height is set to a non-em length, such as px, that instead could be set.

Definitely having a variable or mixin using a css preprocessor such as LESS or SCSS could help keep these values matching the appropriate line-height, or javascript could be used to dynamically read such, but really, the line-height should be known in the context of where this is being used, and the appropriate settings here made.

UPDATE for minified text (no spaces) issue

Kubi's comment noted that a minification of the html that removes the spaces between the <a> elements causes the justification to fail. A pseudo-space within the <a> tag does not help (but that is expected, as the space is happening inside the inline-block element), a <wbr> added between the <a> tags does not help (probably because a break is not necessary to the next line), so if minification is desired, then the solution is a hard coded non-breaking space character  --other space characters like thin space and en space did not work (surprisingly).

Nearing a Future Clean Solution

A solution in which webkit was behind the times (as of first writing this) was:

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet, and will not be */
    text-align-last: justify; /* IE */
}

It works in FF 12.0+ and IE8+ (buggy in IE7).

For Webkit, as of version 39 (at least, might have crept in earlier) it does support it without the -webkit- extension but only if the user has enabled the experimental features (which can be done at chrome://flags/#enable-experimental-web-platform-features). Rumor is that version 41 or 42 should see full support. Since it is not seamlessly supported by webkit yet, it is still only a partial solution. However, I thought I should post it as it can be useful for some.

Justify Content property is not working in display:flex

To avoid any confusion, I removed all your CSS code and tried to match with what you want.

.container {
  background: red;
  color: white;
  display: flex;
  justify-content: center;
}
    
.dual-wrapper, .max-wrapper {
  display: inline-block;
  padding-left: 1rem;
  padding-right: 1rem;
}

<div class="container">
  <div class="dual-wrapper">
    Example 1
  </div>
  <div class="max-wrapper">
    Example 2
  </div>
</div>

The 'justify-content' property isn't working

justify-content only has an effect if there's space left over after your flex items have flexed to absorb the free space. In most/many cases, there won't be any free space left, and indeed justify-content will do nothing.

Some examples where it would have an effect:

• if your flex items are all inflexible (flex: none or flex: 0 0 auto), and smaller than the container.

• if your flex items are flexible, BUT can't grow to absorb all the free space, due to a max-width on each of the flexible items.

In both of those cases, justify-content would be in charge of distributing the excess space.

In your example, though, you have flex items that have flex: 1 or flex: 6 with no max-width limitation. Your flexible items will grow to absorb all of the free space, and there will be no space left for justify-content to do anything with.

CSS center display inline block?

The accepted solution wouldn't work for me as I need a child element with display: inline-block to be both horizontally and vertically centered within a 100% width parent.

I used Flexbox's justify-content and align-items properties, which respectively allow you to center elements horizontally and vertically. By setting both to center on the parent, the child element (or even multiple elements!) will be perfectly in the middle.

This solution does not require fixed width, which would have been unsuitable for me as my button's text will change.

Here is a CodePen demo and a snippet of the relevant code below:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

Is there any CSS tag to justify content (like in word)?

NOTE: avoiding text-align-last: center; due low support. (https://caniuse.com/css-text-align-last)

The problem is how to center a specific line of a text or how to wrap exactly. If it's critical what I'd probably do while researching a solution would be wrap the line in a span tag with display: block but remove this display: block in low resolutions (using @media queries).

See the next snippet (without the @media to see a break problem in low res)

.ans{
    padding-top: 1.2vh;
    color:lightsalmon;
    font-size: 5vh;
    text-align: center;
}

.ans span {
    display: block;
}

.q {
    text-align: center;
}

<div id="qa">
    <p class="q">
        Why HOTPICKS?
    </p>
    <p class="ans">
        HOTPICKS provides a discount of Upto 75% on 
        <span>National and International Brands.</span>
    </p>
</div>

---

Related Topics