CSS Flexbox: wrap item tile grid, specify items per row? - html

Question

I have a div with 20 items:
<div class="brand-illustrations">
<img src="modules/foundation/assets/images/pb_brand_icons_01_Shipping.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_02_Time_Savings.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_03_Increase.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_04_Decrease.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_05_Money.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_06_Money_Savings.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_07_Accuracy.svg">
...etc...
</div>
And I made the enclosing div a flexbox:
.brand-illustrations {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
img {
display: block;
}
}
Which does as expected:
But I'd prefer to wrap to the next row after every 5th item. I know about n-th-child but am unsure the best way to use it with flex items.

Answer 1

You can't force flexbox to wrap as it has no grid function. At best you can fix the width of each flex-item to 20% with 'flex: 0 0 20%'..but I'd suggest wrapping each image in a div as they have unexpected results under flexbox.
Codepen Demo
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box {
flex: 0 0 20%;
text-align: center;
margin-bottom: 1em;
}
img {
max-width: 100%;
min-width: 0;
height: auto;
}
<div class="container">
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
</div>