Flexbox not giving equal width to elements

Question

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.

Fiddle

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

* {
  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>

Answer 1

To understand why setting the flex-grow property doesn't distribute items equally in a flex container, we need to delve into the inner workings of the flex algorithm and understand how flex-grow operates.

1. Default Behavior of display:flex:

When you set a container to display:flex, it defaults to flex-direction:row, and its flex items will have widths based on their content. In this scenario, the larger the content of an item, the wider it becomes. The padding and flex-grow have been removed from your code to show this behavior:

After removing those declarations from .tabs ul li:{...}:

flex-grow: 1;
padding: 20px 20px 20px 70px;

* {
  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>

2. The Role of flex-grow: Applying flex-grow to a flex item instructs the item to expand when there's available space within the container.

3. Equal Distribution with flex-grow:1: If we set all items to flex-grow:1, like in your example, they will proportionally share the remaining space equally. However, it's essential to note that initially, they are not of equal width. The additional space is added to the initial width of each item (the content width).

Here's how it looks when we return back flex-grow:1:

Note that the right space after each flex item is equal but the width of items are not equal due to different content sizes

4. Solving the Unequal Width Issue: To achieve truly equal distribution, you can set the width of the items to 0 this will make the space available to be utilized by flex-grow and here how it looks:

Note that the blue rectangle is the border of all the items

Now we have all available space to be distributed by flex-grow and we can divide them evenly among flex items.

Alternatively, you can use the flex-basis property to ensure equal distribution. Setting flex-basis:0 produces a similar result. Another option is to use the shorthand property flex, where flex:1 is equivalent to flex-grow:1, flex-shrink:1, and flex-basis:0.

and both options achieve the same result:

and here is the result after we add back the padding:

It's worth mentioning that the flex algorithm has a way of determining the initial width (in the case of flex-direction:row) and height (in the case of flex-direction:column) using flex-basis that can override the width or height property if it exists. To avoid potential bugs, it is recommended to use it or the shorthand flex property to ensure consistent and predictable behavior.

In summary, to ensure equal distribution of space among flex items, you can use flex-basis:0 or flex:1 with default values, while keeping in mind the nuances of the flex algorithm. This approach ensures that items in a flex container are divided equally and consistently, regardless of their initial content-based widths.

Answer 2

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

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

Answer 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

Answer 4

Solution:

flex: 1;

OR

.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.

Answer 5

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.

Answer 6

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.