实现多子元素水平均匀可换行的排列
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;
Responses