ラップされたフレックスボックスアイテムに垂直スペーシングを与える

Question

私は最近、フレックスボックスで初めてプレイしています。一般的に、それは大変素晴らしいことです。私は、しかし、私は任意の垂直方向の間隔をラップしているフレックスアイテムを与えるように見えることができない問題が最近発生しました。

私が使用して試してみた：

align-content: space-between; 

が、これは何もしていないようです。私が行った読書から、私のフレックスコンテナが含まれている要素よりも背が高いならば、これはうまくいくように見えるでしょう（そうでしょうか？）もしそうなら、フレックスコンテナの高さを設定する必要はありません。フレックスボックスを使用する目的を破るように見えるでしょうか？

この作業を行うために私が考えることができる唯一の方法は、内部の要素にボトムマージンを与えることですが、これも目的を破るようです。

がうまくいけば、私はかなり明白何か欠けている - ここでcodepenへのリンクです：

HTML：：

<div class="container"> 
    <div class="col-sm-12"> 
    <h1>Flexbox Wrapping</h1> 

    <div class="flexContainer"> 
     <div class="flexLabel">This is a flex label</div> 

     <a class="btn btn-primary">Button 1</a> 
     <a class="btn btn-warning">Button 2</a> 
     <a class="btn btn-success">Button 3</a> 
    </div> 
    </div> 
</div> 

CSS：

.flexContainer { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    align-content: space-between; 
    justify-content: center; 
} 
.flexContainer .flexLabel { 
    flex-basis: 150px; 
    flex-shrink: 0; 
} 

また http://codepen.io/lordchancellor/pen/pgMEPz

を、ここに私のコードです

EDIT - ちょっと詳しく説明します十分に十分にそれを言います。

私の大規模なプロジェクトでは、フレックスボックスを使用して行内に配置されたブロックレベルの要素がいくつかあります。しかしながら、ユーザが画面の幅を縮小する可能性があるので、ある程度の応答性が必要である。この時点で、私は自分の要素が積み重なるようにしたい（したがってラップ）。しかし、要素が積み重なり始めると、それらはすべて垂直方向に触れているので、そこには間隔が必要です。

これを解決するには、上下のマージンが唯一の方法かもしれませんが、これを達成するためにフレックスボックス中心の方法があるのだろうかと思っていました。

Answer 1

幅を適用して折り返しを適用すると、通常は高さを設定せずに余白を使用できます。

.flexContainer { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    background: pink; 
 
    width: 150px; 
 
} 
 
.flexContainer > * { 
 
    margin: 1em 0; 
 
} 
 
.flexContainer .flexLabel { 
 
    flex-basis: 150px; 
 
    flex-shrink: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="col-sm-12"> 
 
    <h1>Flexbox Wrapping</h1> 
 

 
    <div class="flexContainer"> 
 

 
     <div class="flexLabel">This is a flex label</div> 
 

 
     <a class="btn btn-primary">Button 1</a> 
 
     <a class="btn btn-warning">Button 2</a> 
 
     <a class="btn btn-success">Button 3</a> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

これは、スペースを計算するためにフレックスコンテンツの高さがないためです。フレックスコンテナはできるだけ小さいので、高さを加えればうまくいくはずです。

Answer 3

私は同様の問題を持っていたし、私はこの問題を解決するには、次のハックを使用。負および正のマージンが、それは（列間この場合10pxに）行の間のマージンを加算し、後続の行に対して、相殺フレックス項目の一番上の行について

/* add a negative top-margin to the flex container */ 
.flexContainer { 
     /* ... your existing flex container styles here */ 
    margin: -10px 0 0 0; 
} 
    /* add a corresponding positive top margin to all flex items (all direct children of the flex container) */ 
.flexContainer > * { 
    margin-top: 10px; 
} 

。

エレガントではありませんが、仕事は終わりです。

Answer 4

別のハック解決策は、アイテムに下の境界を与えることです：

border-bottom: 10px solid gray; 

色は明らかにあなたの背景の色でなければなりません。