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