CSS Gap(沟槽)

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

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

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

评论 (3)

取消
  1. 头像
    Kannagi Peekumii
    Windows 10 · Google Chrome

    做了三年前端的我居然不知道有此神器,属实不应该

    查了下它不兼容IE,不过这年代谁还管IE用户。。。

    (https://www.npmjs.com/package/flex-gap-polyfill 👈有这个polyfill可以用)

    回复
    1. 头像
      羽叶 作者
      Windows 10 · Google Chrome
      @ Kannagi Peekumii

      说得好 这年代谁还管IE用户

      回复
  2. 头像
    mozzie
    MacOS · Google Chrome

    强啊!晔神

    回复