【css】display:flexで横並びにしたboxがwrapで折り返した際に上下の隙間が空くようにしたい

いつもお世話になっております。

###前提・実現したいこと

display:flexにて5つの要素が横並びになるといったものを作成しております。
flex-wrap:wrapを指定し、画面サイズが小さくなった際には
複数行に折り返すようにしたく、下記のようにcss、htmlを組みました。

しかし、下記のコードではboxが折り返した際に上と下のboxがぴったりくっついてしまいます。
これを上下で間隔が空くようにしたいです。

###該当のソースコード

html
1<ul class="top_card_list fl_simple">
2    <li><span class="em">テキストテキスト</span>テキスト</li>
3    <li><span class="em">テキストテキスト</span>テキストテキストテキスト</li>
4    <li><span class="em">テキストテキスト</span>テキスト<span class="number">15</span>です</li>
5    <li><span class="em">テキスト</span>テキスト</li>
6    <li><span class="em">テキスト</span>テキスト<span class="number">25</span>テキスト</li>
7</ul>

css
1.fl_simple {
2  display: -webkit-box;
3  display: -moz-box;
4  display: -ms-flexbox;
5  display: -webkit-flex;
6  display: flex;
7}
8.top_card_list{
9  text-align: center;
10  flex-wrap: wrap;
11  justify-content: flex-start;
12  align-content: space-between;
13  -webkit-align-content: space-between;
14  list-style-type: none;
15}
16.top_card_list li:last-of-type {
17  margin-right:0;
18}
19[class*="top_"] .number{
20  font-size:18px;
21}
22.top_card_list .em{
23  font-weight: bold;
24  display: block;
25  margin-bottom: 6px;
26}
27.top_card_list li {
28  padding: 16px;
29  border-radius: 4px;
30  background: #f9f9f9;
31  border: 1px solid #ccc;
32  border-top: 3px solid #0091f0;
33  margin-right: 24px;
34  flex: 0 0 205px;
35}

flexに対し、まだ苦手意識があり完璧に理解ができていないのですが、
親に指定した align-content: space-between;で
想定のデザインになるつもりでしたがalign-contentが
全く動作していないように思われます。。

そもそもalign-contentの考え方が違うのでしょうか？

ご教授頂けますと幸いです。

###16/12/07 追記

align-content: space-between;って
親要素の高さが設定されてないと効かないんですね…

今回の場合親要素の高さは指定できなかったので
margin-bottomでの解決で最適解のようでした

メモ的にこちらの質問に追記させていただきます

css
1  /* align-content効かせる用 */
2  .fl_simple {
3    display: -webkit-box;
4    display: -moz-box;
5    display: -ms-flexbox;
6    display: -webkit-flex;
7    display: flex;
8  }
9  .top_card_list{
10    text-align: center;
11    flex-wrap: wrap;
12    justify-content: flex-start;
13    align-content: space-between;
14    -webkit-align-content: space-between;
15    list-style-type: none;
16    height:400px;
17    width:auto;
18    padding:8px;
19  }

行動規範の内容に同意します

回答2件

ベストアンサー

li要素にmargin-bottomを追加するのでは駄目でしょうか？

css
1.top_card_list li {
2  padding: 16px;
3  border-radius: 4px;
4  background: #f9f9f9;
5  border: 1px solid #ccc;
6  border-top: 3px solid #0091f0;
7  margin-right: 24px;
8  flex: 0 0 205px;
9  margin-bottom: 20px; //これを追加
10}