今回は3×3レイアウトをflexboxで作っていきたいと思います。
HTMLコード
<div class="board">
<ul>
<li>
<div class="icon">
<img src="https://dl.dropbox.com/s/11le4z3tt0x8q7p/icon.jpg?dl=0" alt="アイコン">
</div>
<div class="label">ラベル1</div>
</li>
<li>
<div class="icon">
<img src="https://dl.dropbox.com/s/11le4z3tt0x8q7p/icon.jpg?dl=0" alt="アイコン">
</div>
<div class="label">ラベル2</div>
</li>
<li>
<div class="icon">
<img src="https://dl.dropbox.com/s/11le4z3tt0x8q7p/icon.jpg?dl=0" alt="アイコン">
</div>
<div class="label">ラベル3</div>
</li>
</ul>
</div>
flexboxの親要素となるのはboardクラスの中のul要素です。
ul要素の中の子要素（li）の数が横に並ぶ要素数になります。
今回は3×3レイアウトを作成するので、li要素を3つ用意します。
縦に並ぶ要素はul（親要素）の数になるので、<ul>～</ul>をコピーして2回貼り付けましょう。
CSSコード
.board {
width: 350px;
margin: 0 auto;
}
.board ul {
display: flex;
justify-content: space-between;
align-content: space-between;
}
上のコードはflexboxの部分です。
ul要素を囲むboardクラスは今回横幅を350pxと指定しています。
（指定がない場合は全画面に対して配置されることになります）
まず、親要素のulにdisplay: flex;と指定します。
今回子要素は1列に並べるので折り返しの設定はしていませんが、折り返したい場合はflex-wrap: wrap（wrap-reverse）;のように記述すると複数行に並べられます。
justify-contentとalign-contentはそれぞれ、水平方向、垂直方向の並べ方について指定します。
どちらもspace-betweenと指定することで、最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置されます。
全部の子要素を均等に配置したい場合はspace-aroundとすればよいです。
サンプル
See the Pen QBPNQX by Nssh (@shtg11) on CodePen.0
上がサンプルとなります。
モバイル用サイトのメニュー画面等色々な場面で使えると思うのでぜひ活用してみてください。