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   SASS   x000D   x000D      x000D    font-size  16px  x000D    x000D   x000D   tabs   x000D    max-width  1010px  x000D    width  100   x000D    height  5rem  x000D    border-bottom  solid 1px grey  x000D    margin  0 0 0 6 5rem  x000D    display  table  x000D    table-layout  fixed  x000D    x000D   tabs ul   x000D    margin  0  x000D    display  flex  x000D    flex-direction  row  x000D    x000D   tabs ul li   x000D    flex-grow  1  x000D    list-style  none  x000D    text-align  center  x000D    font-size  1 313rem  x000D    background  blue  x000D    color  white  x000D    height  inherit  x000D    left  auto  x000D    vertical-align  top  x000D    text-align  left  x000D    padding  20px 20px 20px 70px  x000D    border-top-left-radius  20px  x000D    border  solid 1px blue  x000D    cursor  pointer  x000D    x000D   tabs ul li active   x000D    background  white  x000D    color  blue  x000D    x000D   tabs ul li before   x000D    content      x000D    x000D   lt div class  tabs  gt  x000D     lt ul gt  x000D       lt li class  active  data-tab  1  gt Pizza lt  li gt  x000D       lt li data-tab  2  gt Chicken Noodle Soup lt  li gt  x000D       lt li data-tab  3  gt Peanut Butter lt  li gt  x000D       lt li data-tab  4  gt Fish lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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.

User · Answer

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

[html] Flexbox not giving equal width to elements

Examples related to html

Examples related to css

Examples related to flexbox