Justify-Content: Space-Between Failing to Align Elements as Expected

justify-content: space-between failing to align elements as expected

The problem is a conflict with the Bootstrap stylesheet, which places pseudo-elements in your flex container. This causes space-between to calculate multiple flex items as opposed to just two.

Here's your flex container:

The logo and nav menu are aligned with justify-content: space-between, but are not positioned at opposite edges. The alignment looks more like space-around.

---

Here's Bootstrap's ::before and ::after pseudo-elements (or pseudo-flex items):

As noted in Firefox documentation:

In-flow ::after and ::before pseudo-elements are flex items.

---

Let's put some content in the pseudos:

Like shining a black light in a motel room, you see a lot of stuff you wish wasn't there.

---

Remove (or override) the pseudo-elements and your problem is gone:

---

More details about flex containers and pseudo-elements:

• Pseudo elements breaking justify-content: space-between in flexbox layout
• Properly sizing and aligning the flex item(s) on the last row
• Methods for Aligning Flex Items along the Main Axis (see Box #81)

Pseudo elements breaking justify-content: space-between in flexbox layout

Short Answer

In CSS, there is currently no 100% reliable way to prevent pseudo-elements from impacting the justify-content: space-between calculation.

Explanation

::before and ::after pseudo elements on a flex container become flex items.

From the spec:

4. Flex Items

Each in-flow child of a flex container becomes a flex item.

In other words, each child of a flex container that is in the normal flow (i.e., not absolutely positioned), is considered a flex item.

Most, if not all, browsers interpret this to include pseudo-elements. The ::before pseudo is the first flex item. The ::after item is the last.

Here is further confirmation of this rendering behavior from Firefox documentation:

In-flow ::after and ::before pseudo-elements are now flex
items
(bug 867454).

One possible solution to your problem is to remove the pseudo-elements from the normal flow with absolute positioning. However, this method may not work in all browsers:

• Absolutely positioned flex item is not removed from normal flow in Firefox & IE11

See my answer here for illustrations of pseudo elements messing up justify-content:

• justify-content: space-between failing to align elements as expected

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.

Can't get justify-content: space-between to work in Bootstrap framework

Reset the user-agent/browser padding of ul element - see demo below:

ul {  list-style: none;  background-color: rebeccapurple;  color: white;  margin: 55px 10px;  padding: 0;  display: flex;  /*align-items: stretch;*/  justify-content: space-between;}li {  padding: 0;  background-color: #6495ed;}li:nth-of-type(2n) {  background: lightslategrey;}

<ul>  <li>Item</li>  <li>Item</li>  <li>Item</li>  <li>Item</li>  <li>Item</li>  <li>Item</li></ul>

flexbox refuses to justify content as i intended

#location{
  width: 40vw;
  display: flex;
  justify-content: space-between;
}

 <div class="container">
      <form id="location">
        <div class="item"><input type="text" placeholder="Location"></div>
        <div class="item"><input type="submit" value="Get the weather!"></div>
      </form>
    </div>

React Native - Justify Content not Working

The problem is that you are not aligning the text within the individual Views. Your example mistakenly aligns the inner View elements within the larger View element rather than aligning the text.

To center-align the text vertically within their Views you just need to add justifyContent: "center" to those individual three green Views.

Here's an example: https://codesandbox.io/s/recursing-kirch-n8one?file=/src/App.js:393-417

To further explain why you were experiencing the issue you did, see this screenshot with boxes outlining the space the elements were taking up on-screen:

You can see the inner Views are only taking up the needed width of the text elements inside, but are using the max height available to them.

Tailwind Css Flexbox Justify-between doesn't work as expected

It seems that you have to regenerate your css. In the development process, however, it is recommended to always work with the whole TailwindCSS file. For the production you can purge unnecessary css.
Means:
npm run dev or start npm run watch.

---

Related Topics