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.