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

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>