CSS Keep all flexbox children elements the same size

Question

My code is shown in this JSFiddle:

#container {     align-content: flex-start;     background-color: red;     display: flex;     flex-flow: row wrap;     height: 200px;     justify-content: space-around;     padding: 10px;     width: 400px; }  .child-item {     background-color: yellow;     flex-basis: 75px;     flex-grow: 1;     height: 20px;     margin: 10px;     width: 75px; }

<div id="container">     <div class="child-item"></div>     <div class="child-item"></div>     <div class="child-item"></div>     <div class="child-item"></div>     <div class="child-item"></div>     <div class="child-item"></div> </div>

Although, I would like the two items across the bottom to have the same with as the items on the top.

I don't want to float them left and fix their width, this will not work for my arrangement in other resolutions.

Answer 1

You have 2 ways of doing this:

flex-grow: 0 (fiddle)

If you set flex-grow to 0 you are telling the items to keep their width and expand the empty space. Using flex-grow: 1 the items will expand the width to fit the space.

invisible items (fiddle)

Add some invisible items after the normal items with the same flex properties. You will get a left aligned look.

In this solution there will be the same number of items in all visible rows so make sure to add enough invisible items to work properly on larger screens.