【CSS】Flexboxでレイアウト

いままでfloatやJSで横並びのボックスを調整していましたが、楽になりますね～。

よく使いそうなものをメモメモ。

▼flexboxレイアウト

.flex-container {
 	display: -webkit-flex;
	display: flex;
}

▼flexアイテムの複数行に配置

.flex-container {
	-webkit-flex-wrap: wrap; 
	flex-wrap:         wrap;
}

▼flexアイテムの等間隔配置

.flex-container {
	-webkit-justify-content: space-between;
	justify-content:         space-between;
}

▼flexアイテムの高さを揃える

.flex-container {
	-webkit-align-items: stretch;
	align-items:         stretch;
}

【参考】CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス