<div style="height:calc(100vh - 166px);overflow:auto;display:flex;justify-content:flex-start;flex-wrap:wrap">
<div class='c_item'></div>
<div class='c_item'></div>
<div class='c_item'></div>
</div>
.c_item {
background-color: #1f2d3d;
height: calc(50% - 8px);
margin: 0 8px 8px 0;
width: calc((100% - 16px) / 3);
min-width: calc((100% - 16px) / 3);
max-width: calc((100% - 16px) / 3);
&:nth-child(3n) {
margin-right: 0;
}
}
方法2:
.parent {
width: 200px;
height: 150px;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;