flex布局

flex

  两端对齐,列不满左对齐

  利用after或者before(适用于每行3或者4列)

.box:after {
    display:block;
    content:"";
     30%;
    height:0px;
}
全部代码
.box { display: flex; flex
-wrap: wrap; justify-content: space-between; } .item { 30%; height: 50px; background-color: #f1f8ff; margin-bottom: 10px; } .placeholder { 30%; height: 0px; } <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="placeholder"></div> </div>
代码改变了我们,也改变了世界
原文地址:https://www.cnblogs.com/wencaiguagua/p/14329553.html