CSS Gap(沟槽)

羽叶
2021-07-01 / 1 评论 / 18 阅读 / 正在检测是否收录...

做页面时,经常遇到 多列表设计(如图),要求块与块上下间距一样!

像以前,我们一般使用 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>

;

0

评论 (1)

取消
  1. 头像
    mozzie
    MacOS · Google Chrome

    强啊!晔神

    回复