フレックスラップ：行間に同じスペースがありますか？

Question

しばらくしてから、私は今CSSのプロパティflexで再度作業する可能性があります。 justify-content: space-between;はうまくいきましたが、今は行間にスペースを入れたいと思っています（これは行内の単一のボックスの間と同じスペースにする必要があります - 添付の画像を参照）。

これは簡単に行う可能性はありますか？

Answer 1

私はあなたが純粋なCSSでそれを達成することができることをわかりません。

コードスニペット以下全ページでクリックするか、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>