Flexbox Tile Problems in CSS
The first problem with the tile is actually obvious right away - it's very inconvenient that the parent has to explicitly set the height. After all, we may well have a situation where the number of blocks will change dynamically and their number will be either less or more than 9.
The second problem will arise if the number of blocks is such that the last row does not have enough blocks. In this case, the last row will look disgusting:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
.parent {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
It turns out that even horizontally the value space-between works poorly in our case.
To summarize: if the number of your children is always constant and fits into the parent normally, then the tile on space-between is quite a convenient thing. Otherwise, you will have to come up with something else.
Given 12 elements, tile them into 4 elements per row with each element 100px wide and 20px spaced between them.
Given 12 elements, tile them into 3 elements per row with each element 150px wide and 10px spaced between them.
