css flex max items per row code example
Example 1: flexbox limit items per row
<style>
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex: 1 0 33%;
margin: 5px;
height: 100px;
background-color: blue;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Example 2: flex max item per row
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex: 2 0 21%; /* explanation below */
margin: 5px;
height: 100px;
background-color: blue;
}