今天记录一下css布局的flex布局的一个小妙招之gap

在平常前端开发中，常见的开发布局flex布局，常见的布局有这个样子，这个是可以用css进行修改，但是今天分享一个简单的方法

 

 

 这种布局的话，如果是偶数的话可以用flex的 justify-content: space-between;，但是如果像上面五个那样的就回出现下面的这种情况，使用gap就可以更简单的进行实现，代码如下,就进行了简单的操作，可以根据业务样式自行修改

//html
　　<div class="flexBox">
        <div class="flexItem"></div>
        <div class="flexItem"></div>
        <div class="flexItem"></div>
        <div class="flexItem"></div>
        <div class="flexItem"></div>
    </div>
//css

　　.flexBox{         width: 700px;         height: 250px;         border: 1px solid #000;         margin-top: 30px;         display: flex;         flex-wrap: wrap;         /* justify-content: space-between; */         gap:50px;
    }     .flexItem{         width: 200px;         height: 100px;         background-color: #03a9f4;         border: 1px solid #000;         box-sizing: border-box;     }

 

今天的记录就到此为止了，更多gap的使用方法可以查看gap (grid-gap) - CSS（层叠样式表） | MDN (mozilla.org)

 

标签：box,flex,布局,gap,border,css
来源： https://www.cnblogs.com/wcq520/p/16169246.html