Flexbox not giving equal width to elements

Attempting a flexbox nav that has up to 5 items and as little as 3, but it’s not dividing the width equally between all the elements.

Contents hide

Fiddle

Fiddle

The tutorial I’m modeling this after is http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

SASS

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}

<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

There is an important bit that is not mentioned in the article to which you linked and that is flex-basis. By default flex-basis is auto.

From the spec:

If the specified flex-basis is auto, the used flex basis is the value of the flex item’s main size property. (This can itself be the keyword auto, which sizes the flex item based on its contents.)

Each flex item has a flex-basis which is sort of like its initial size. Then from there, any remaining free space is distributed proportionally (based on flex-grow) among the items. With auto, that basis is the contents size (or defined size with width, etc.). As a result, items with bigger text within are being given more space overall in your example.

If you want your elements to be completely even, you can set flex-basis: 0. This will set the flex basis to 0 and then any remaining space (which will be all space since all basises are 0) will be proportionally distributed based on flex-grow.

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

This diagram from the spec does a pretty good job of illustrating the point.

And here is a working example with your fiddle.

Method 2

To create elements with equal width using Flex, you should set to your’s child (flex elements):

flex-basis: 25%;
flex-grow: 0;

It will give to all elements in row 25% width. They will not grow and go one by one.

Method 3

As explained in @James Montagne answer flex-basis: 0 will ensure the flexbox columns are distributed evenly which works in this case since the column content can wrap and isn’t forcing the width. However, in cases where the width of the column content is forced (for example with image width or white-space: nowrap), the solution is to set min-width: 0…

li {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

https://codeply.com/p/sLZxZRFduI

Method 4

Solution:

flex: 1;

.flex-child-items{
   flex-grow: 1;
}

Explanation:

If you only put display: flex it just horizontally align all the item and the width is going to be sum of child’s width (depend on the content or sometimes width property).

For example:

// A normal flex

++++++++++   ++++++++++   ++++++++++
+        +   +        +   +        +
+   A    +   +   B    +   +   C    +
+  10px  +   +  10px  +   +  10px  +
+        +   +        +   +        +
++++++++++   ++++++++++   ++++++++++

Now suppose you want to divide space equally to all of them.
To do this add flex-grow: 1 to all children of flex. (In this example A,B and C)

.A, .B, .C {
    flex-grow: 1;
}

After this it looks like this:

++++++++++                              ++++++++++                              ++++++++++
+        +                              +        +                              +        +
+   A    +                              +   B    +                              +   C    +
+  10px  +                              +  10px  +                              +  10px  +
+        +                              +        +                              +        +
++++++++++                              ++++++++++                              ++++++++++

*BTW, if the above example box does not look like center, sorry for that but code work try it on the project.

Method 5

Flex may not give equal widths to children in all cases.

use css grid for equal width elements.

.el{
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr
}

Reference https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/

If you wish to use CSS flex only, then there are few options

flex-basis: 100% to all the childs, this will be a close match.
OR
flex-basis: 0 this is less useful than first option

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating