Flexbox not giving equal width to elements

by

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.

More Related Contents:

  1. Flexbox: center horizontally and vertically
  2. CSS-only masonry layout
  3. When flexbox items wrap in column mode, container does not grow its width
  4. Proper use of flex properties when nesting flex containers
  5. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  6. Why are flex items not wrapping?
  7. Equal height columns with CSS
  8. Make grid container fill columns not rows
  9. Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
  10. Make flex items take content width, not width of parent container
  11. Make background color extend into overflow area
  12. Center text over an image in flexbox
  13. Using flex order property to re-arrange items for desktop and mobile views
  14. Why can’t be flex containers?
  15. Flexbox fill available space vertically
  16. Prevent flex items from rendering side to side
  17. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  18. Equal space between flex items
  19. How can I make a display:flex container expand horizontally with its wrapped contents?
  20. Why does percentage padding break my flex item?
  21. Why is there vertical scroll on the main container?
  22. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  23. How can I show three columns per row?
  24. How to center horizontally and vertically?
  25. How can I create a row-based masonry layout using CSS?
  26. Element with “display: inline-flex” has a strange top margin
  27. Height is not correct in flexbox items in Chrome [duplicate]
  28. Image behavior within flexbox (rows embedded in columns)
  29. Flex items create space between them when they wrap [duplicate]
  30. Sizing flex items on the last row

Leave a Comment