533

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>
InSync
  • 4,851
  • 4
  • 8
  • 30
itsclarke
  • 8,622
  • 6
  • 33
  • 50
  • 1
    give a min-width to your table like and set padding with vw units might help : http://jsfiddle.net/2nY9N/2/ drop the flex-grow and just do flex:1; it will use defaut values for the 2 other properties – G-Cyrillus Jul 31 '14 at 18:49
  • Possible duplicate of [How to force division into equal parts using flexbox](https://stackoverflow.com/questions/17000115/how-to-force-division-into-equal-parts-using-flexbox) – Gajus Jun 23 '17 at 11:15
  • Possible duplicate of [Make flex-grow expand items based on their original size](https://stackoverflow.com/q/43520932/3597276). – Michael Benjamin Aug 03 '22 at 19:56

5 Answers5

1281

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.

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • 8
    This ruins wrapping for me on Safari. – Snowman Feb 18 '17 at 16:45
  • 128
    The awesome thing about this answer is that you explain flex-basis with this example better than anywhere else on literally the entire internet. I'm going to contact MIT about giving you an honorary professorship. – dudewad Apr 21 '17 at 18:46
  • 151
    Just to mention that `flex: 1;` is shorthand for combination of `flex-grow: 1`, `flex-basis: 0`. – Vadim Ovchinnikov Jun 29 '17 at 16:39
  • 2
    Just in case if anyone wants to know in depth, I came across this great article on the web: https://css-tricks.com/flex-grow-is-weird/ – Kuldeep Kumar Feb 22 '19 at 06:49
  • Oh man, always hits me on the head when I thought I grasped CSS. – ibic Jul 10 '19 at 09:48
  • 2
    If this doesn't work for you, check if one item has different horizontal padding than another, then this solution doesn't make them the same width. – Curtis Jul 12 '19 at 18:42
  • 5
    you will also probably need to reset min width to zero (`min-width: 0`), because for flex it is `auto` by default and it won't allow properly sizing in some cases. – SleepWalker Oct 24 '19 at 05:25
  • If the li items had tags with content inside, will this still work? https://jsbin.com/huvimepomi/edit?html,css,output Struggling to get the boxes to have same width here. Thanks. – Jayonline Jan 21 '20 at 15:54
  • @VadimOvchinnikov when `flex` has only one unitless value it's a shorthand for `flex-grow` solely, without `flex-basis` https://developer.mozilla.org/en-US/docs/Web/CSS/flex – Adrian Bienias May 13 '21 at 15:32
  • 7
    `min-width: 0` was absolutely key to make it work for me – sebastien.b May 22 '21 at 00:11
39

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
24

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.

nnn
  • 328
  • 3
  • 9
alexJS
  • 626
  • 6
  • 11
  • 106
    This is pretty awkward since it diminishes the benefit of flex entirely. If youre going to hardcode your column sizes theres easier ways to solve things. – Kloar Nov 04 '16 at 14:50
  • 3
    that's not wrong at all .. if you wanna have boxes with same length and breaken down when row is fully occupied .. you can easily achieve that like this. Maybe set also min-width if you need a min width – Ilario Engler May 10 '17 at 07:29
  • 3
    @Kloar You're saying that like it's the only benefit of flexboxes... They can certainly still be beneficial when you need equal widths, e.g. for responsiveness. Also, it's not like flexboxes aren't easy? – user2999349 Sep 13 '17 at 14:58
12

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.

Rohit Nishad
  • 2,570
  • 2
  • 22
  • 32
  • 1
    Upvoted for `flex: 1`. I like your commitment to visualize but see if you can change it to a [snippet](https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers) instead =) – Mandera Nov 08 '22 at 02:45
-3

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
Akshay Vijay Jain
  • 13,461
  • 8
  • 60
  • 73