Talk is cheap, show you the code.

First , We make use of displat:flex, The following layouts can be easily implemented ：

 <div class="app">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
 Copy code 

.app {
display: flex;
flex-wrap: wrap;
height: 300px;
width: 300px;
}
.item {
border: 1px solid lightpink;
width: 98px;
}
 Copy code 

If this is changed width, I have to calculate , You have to change the code again , Who can bear this , Keep thinking .flex-basis: 33%, Is it possible to liberate my calculator , try

.item {
border: 1px solid lightpink;
flex-basis: 33%;
}
 Copy code 

There is a problem , because border Why ,box Inside content yes 98px, So it is 98/300=32.6667, have a look 32%

.item {
border: 1px solid lightpink;
flex-basis: 32%;
}
 Copy code 

The problem is obvious , A little more clearance on the right , that 0.6666666667% Lost the duck , Annoying

My old brother , Big cake said , No way out

Then I can't admit defeat , I continue to see flex Properties of

Big cake said ,grow Well ,grow, Let them grow up , Then there is the following attempt

.item {
border: 1px solid lightcoral;
flex-grow: 1;
}
 Copy code 

flex-grow: 1, If there's room left , Will be divided equally among each item.

But this line is not three , Get a ball .

I gave a rough try , Set the width of each to 30% try

.app {
margin-top: 300px;
display: flex;
flex-wrap: wrap;
height: 300px;
width: 300px;
background: lightgray;
}
.item {
border: 1px solid lightcoral;
flex-grow: 1;
flex-basis:30%;
}
 Copy code 

watch out!!!

Yes, yes , Look back , Although just 30%, But the remaining space is because grow, All grown up , It's full , Brother Naisi

therefore , The conclusion is that you blow yourself up , bye