今天记录一下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)