变为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即可
  • 默认是有分配剩余空间的方法的,所以呀规定下交叉轴中的分配方式
版权声明:本文为yehuaner33原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yehuaner33/article/details/103700122