How to make flexbox items the same size

Question

I want to use flexbox that has some number of items that are all the same width  I ve noticed that flexbox distributes the space around evenly  rather than the space itself   For example    x000D   x000D   header   x000D    display  flex  x000D    x000D   x000D   item   x000D    flex-grow  1  x000D    text-align  center  x000D    border  1px solid black  x000D    x000D   lt div class  header  gt  x000D     lt div class  item  gt asdfasdfasdfasdfasdfasdf lt  div gt  x000D     lt div class  item  gt z lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    The first item is a lot bigger than the second  If I have 3 items  4 items  or n items  I want them all to appear on the same line with an equal amount of space per item   Any ideas   http   codepen io anon pen gbJBqM

User · Answer

You need to add width  0 to make columns equal if contents of the items make it grow bigger    item     flex  1 1 0    width  0

User · Answer

The accepted answer by Adam  flex  1 1 0  works perfectly for flexbox containers whose width is either fixed  or determined by an ancestor  Situations where you want the children to fit the container   However  you may have a situation where you want the container to fit the children  with the children equally sized based on the largest child  You can make a flexbox container fit its children by either    setting position  absolute and not setting width or right  or place it inside a wrapper with display  inline-block   For such flexbox containers  the accepted answer does NOT work  the children are not sized equally  I presume that this is a limitation of flexbox  since it behaves the same in Chrome  Firefox and Safari   The solution is to use a grid instead of a flexbox   Demo  https   codepen io brettdonald pen oRpORG   lt p gt Normal scenario     flexbox where the children adjust to fit the container     and the children are made equal size by setting  flex  1 1 0  lt  p gt    lt div id  div0  gt     lt div gt      Flexbox    lt  div gt     lt div gt      Width determined by viewport    lt  div gt     lt div gt      All child elements are equal size with  flex  1 1 0     lt  div gt   lt  div gt    lt p gt Now we want to have the container fit the children  but still have the children all equally sized  based on the largest child  We can see that  flex  1 1 0  has no effect  lt  p gt    lt div class  wrap-inline-block  gt   lt div id  div1  gt     lt div gt      Flexbox    lt  div gt     lt div gt      Inside inline-block    lt  div gt     lt div gt      We want all children to be the size of this text    lt  div gt   lt  div gt   lt  div gt    lt div id  div2  gt     lt div gt      Flexbox    lt  div gt     lt div gt      Absolutely positioned    lt  div gt     lt div gt      We want all children to be the size of this text    lt  div gt   lt  div gt    lt br gt  lt br gt  lt br gt  lt br gt  lt br gt  lt br gt   lt p gt So let s try a grid instead  Aha  That s what we want  lt  p gt    lt div class  wrap-inline-block  gt   lt div id  div3  gt     lt div gt      Grid    lt  div gt     lt div gt      Inside inline-block    lt  div gt     lt div gt      We want all children to be the size of this text    lt  div gt   lt  div gt   lt  div gt    lt div id  div4  gt     lt div gt      Grid    lt  div gt     lt div gt      Absolutely positioned    lt  div gt     lt div gt      We want all children to be the size of this text    lt  div gt   lt  div gt    body     margin  1em      wrap-inline-block     display  inline-block      div0   div1   div2   div3   div4     border  1px solid  888    padding  0 5em    text-align  center    white-space  nowrap      div2   div4     position  absolute    left  1em      div0 gt     div1 gt     div2 gt     div3 gt     div4 gt       margin  0 5em    color  white    background-color  navy    padding  0 5em      div0   div1   div2     display  flex      div0 gt     div1 gt     div2 gt       flex  1 1 0      div0     margin-bottom  1em      div2     top  15 5em      div3   div4     display  grid    grid-template-columns  repeat 3 1fr       div4     top  28 5em

User · Answer

You could add flex-basis  100  to achieve this   Updated Example   header     display  flex      item     flex-basis  100     text-align  center    border  1px solid black      For what it s worth  you could also use flex  1 for the same results as well    The shorthand of flex  1 is the same as flex  1 1 0  which is equivalent to    item     flex-grow  1    flex-shrink  1    flex-basis  0    text-align  center    border  1px solid black

User · Answer

None of these answers solved my problem  which was that the items weren t the same width in my makeshift flexbox table when it was shrunk to a width too small  The solution for me was simply to put overflow  hidden  on the flex-grow  1  cells

User · Answer

Im no expert with flex but I got there by setting the basis to 50  for the two items i was dealing with  Grow to 1 and shrink to 0   Inline styling  flex   1 0 50

User · Answer

Set them so that their flex-basis is 0  so all elements have the same starting point   and allow them to grow   flex  1 1 0px   Your IDE or linter might mention that the unit of measure  px  is redundant  If you leave it out  like  flex  1 1 0   IE will not render this correctly  So the px is required to support Internet Explorer  as mentioned in the comments by  fabb

[css] How to make flexbox items the same size?

Examples related to css

Examples related to flexbox