实现多子元素水平均匀可换行的排列
in 前端 with 0 comment 856 views

实现多子元素水平均匀可换行的排列

in 前端 with 0 comment 856 views

实现多子元素水平均匀可换行的排列

HTML：

<div class="wall">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS:

.wall{
    width:300px;
    background:#000;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.box{
    width:80px;
    height:80px;
    background:red;
    margin-bottom:20px;
}

效果：

flex.png

核心代码：

在父元素添加

display: flex;
flex-wrap: wrap;
justify-content: space-between;

本文由 visionki 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Nov 4, 2020 at 07:43 am

← → ↓ ↑
Responses