ラップされたフレックスボックスのアイテムに垂直方向の間隔を与える

質問

最近、Flexbox を初めて使いましたが、全般的に素晴らしいものです。しかし、最近、折り返されているフレックス アイテムに縦の間隔を与えることができないような問題に遭遇しました。

を使ってみました。

align-content: space-between;

を追加しましたが、これでは何もできないようです。調べたところ、これはフレックス コンテナの高さが中に含まれる要素よりも高い場合にのみ機能するようです（正しいですか？

これを動作させるために思いつく唯一の方法は、中の要素に下マージンを与えることですが、これもまた目的を失うように思えます。

私がかなり明白な何かを見逃していることを願っています。 http://codepen.io/lordchancellor/pen/pgMEPz

また、私のコードはこちらです。

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

EDIT - ただ、十分に伝わっているかどうか自信がないので、ここにもう少し詳細を追加します。

私の大きなプロジェクトでは、フレックスボックスを使用して一列に配置されたいくつかのブロック レベル要素があります。しかし、ユーザーが画面幅を縮小する可能性があるため、ある程度の応答性が必要です。このとき、要素を積み重ねるようにしたいのです (そのためにラップを使用しています)。しかし、要素が積み重なり始めると、間隔を空けたいところで、すべての要素が縦に接触してしまいます。

上下の余白がこれを解決する唯一の方法であるように見え始めていますが、これを実現するフレックスボックス中心の方法があるかどうか疑問に思っていました。

どのように解決するのですか?

幅を指定して強制的に折り返すと、高さを指定しなくても通常と同じように余白を使うことができます。

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