变为flex模型换行后和上面的内容中间有空白

问题描述 :

.container {
    width: 600px;
    height: 300px;
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
}
.item {
    width: 100px;
    height: 100px;
    border: 1px solid purple;
}
<div class="container">
        <span class="item">1</span>
        <span class="item">2</span>
        <span class="item">3</span>
        <span class="item">4</span>
        <span class="item">5</span>
        <span class="item">6</span>
</div>

解决办法 :

• 在父容器中添加align-content:flex-start即可
• 默认是有分配剩余空间的方法的,所以呀规定下交叉轴中的分配方式