Flex-wrap：行之间的空间相同？

Question

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

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

Answer 1

我不确定你是否可以用纯粹的CSS实现它。最简单的js就是这样的：

点击代码段下方的整页或test it in Codepen

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;