CSS Gap（沟槽）

做页面时，经常遇到 多列表设计（如图），要求块与块上下间距一样！

像以前，我们一般使用 margin 或者 padding 来做处理，但是使用这些是很烦人的，特别是多行多列的时候更麻烦

但是出现 gap 事情就变得简单起来

示例

<style>
    .container { 
    display:flex;
    flex-wrap:wrap;
    gap: 20px;
    padding:20px;
    } 

    .list { 
    flex-basis: 100px;
    height:100px;
    background:blue;
    } 

</style>

<div class="container">
  <div class="list"></div>

<div class="list"></div>

<div class="list"></div>

<div class="list"></div>

<div class="list"></div>

<div class="list"></div>

<div class="list"></div>

<div class="list"></div>

</div>

;