此flex设置中的第一行将对齐start,但由于某种原因,第二行会集中对齐可用空间。小提琴here
.container {
height: 370px;
width: 290px;
display: inline-flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-around;
background-color: rgba(0, 100, 0, 1);
border: .1em solid white;
box-sizing: border-box;
padding: .5em .4em;
font-size: 1em;
overflow: scroll;
}
.child {
position: relative;
align-items: flex-start;
height: 74px;
width: 58px;
border: 1px solid rgba(255, 255, 255, 0.5);
text-align: center;
color: rgba(255, 255, 255, 0.2);
}
<div class="container">
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="child">11</div>
<div class="child">13</div>
<div class="child">14</div>
</div>