html - flex 包装 : Same space between rows?

Question

经过很长一段时间后，我现在有可能再次使用 css 属性 flex。justify-content: space-between; 效果很好，但现在我也想在行之间留出空间(这应该与连续单个框之间的空间相同 –见附图)。

有没有可能轻松做到这一点？

Answer 1

我不确定您是否可以使用纯 css 来实现它。最简单的 js 是这样的:

单击代码段下方的完整页面或test it in Codepen

function vertSpace() {
  var container = $("section"),
      containerWidth = container.outerWidth(),
      elem = container.find(".box"),
      elemWidth = elem.first().outerWidth(),
      num = Math.floor(containerWidth / elemWidth),
      space = (containerWidth - num*elemWidth) / (num - 1);
  elem.css("margin-bottom",space +"px") 
}

$(window).on("load resize",function(e){
  vertSpace();
});

* {
  box-sizing: border-box;
}

section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
section .box {
  background-color: silver;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 20em;
      -ms-flex: 0 0 20em;
          flex: 0 0 20em;
  padding: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
  <div class="box">
    elem 1
  </div>
  <div class="box">
    elem 2
  </div>
  <div class="box">
    elem 3
  </div>
  <div class="box">
    elem 4
  </div>
  <div class="box">
    elem 5
  </div>
  <div class="box">
    elem 6
  </div>
  <div class="box">
    elem 7
  </div>
  <div class="box">
    elem 8
  </div>
  <div class="box">
    elem 9
  </div>
</section>