Flexを使った縦方向揃え

テーブル要素のようにFlexを使用して要素を縦方向に揃える方法をご紹介します。

Flexを使用して横並びの要素を作ると高さが揃うようになります。
縦の位置を調整する場合はalign-itemsプロパティなどを使用しますが、このプロパティはFlexアイテムとなった要素に対して位置の調整が行われます。
この仕様を利用して、さらにFlexアイテムとなっている要素をFlexコンテナーにし縦方向に揃える子要素をFlexアイテムにします。
こうすることで、縦方向に揃える要素がFlexアイテムとなりalign-itemsプロパティなどで縦方向に揃えることが可能になります。

なお、下記の例ではp要素が縦方向の揃える対象の要素となりますが、この要素がなくても文字自体が要素の扱いとなるため縦方向に揃えることができます。
ただしAndroidの標準ブラウザでは文字自体にかけることができないため要素（下記例のp要素部分）が必要になります。

サンプル

Text Text Text Text Text Text
Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text

【HTML】

【CSS】

ul.sample {
								padding:10px;
								border:1px solid #ccc;
								display:-webkit-box;
								display:-moz-box;
								display:-ms-flexbox;
								display:-webkit-flex;
								display:-moz-flex;
								display:flex;
								background-color:#f5f5f5;
							}

ul.sample li {
									margin:0 10px 0 0;
									padding:10px;
									border:1px solid #ccc;
									display:-webkit-box;
									display:-moz-box;
									display:-ms-flexbox;
									display:-webkit-flex;
									display:-moz-flex;
									display:flex;
									width:33.33%;
									background-color:#fff;
									list-style:none;
									-webkit-box-flex:1;
									-moz-box-flex:1;
									-ms-flex-positive:1;
									-webkit-flex:1 1 auto;
									-moz-flex:1 1 auto;
									flex:1 1 auto;
									-webkit-box-align:center;
									-moz-box-align:center;
									-ms-flex-align:center;
									-webkit-align-items:center;
									-moz-align-items:center;
									align-items:center;
								}

justify-contentをcenterにすることで、次のように1行では中央揃え、2行目以降では左揃えのようにすることが可能です。