CSSのFlexboxのまとめ

CSSのFlexboxのメモです。
Flexboxは親要素と子要素で構成されます。
※孫要素には影響しません。IEをサポートしなければベンダープレフィックスは不要。

<div class="parent">
	<div class="child1">1</div>
	<div class="child2">2</div>
	<div class="child3">3</div>
</div>

親要素

親要素（フレックスコンテナ）のプロパティ一覧

.parent {
	/* 親要素として定義 */
	display: flex;
	display: inline-flex;

	/* 子要素の方向を指定 */
	flex-direction: row;
	flex-direction: row-reverse;
	flex-direction: column;
	flex-direction: colmn-reverse;

	/* 子要素の折り返しを指定 */
	flex-wrap: nowrap;
	flex-wrap: wrap;
	flex-wrap: wrap-reverse;

	/* 子要素の水平方向の位置を指定 */
	justify-content: flex-start;
	justify-content: flex-end;
	justify-content: center;
	justify-content: space-between;
	justify-content: space-around;

	/* 子要素の垂直方向の位置を指定 */
	align-items: stretch;
	align-items: flex-start;
	align-items: flex-end;
	align-items: center;
	align-items: baseline;

	/* 複数の子要素の行の配置を指定 */
	align-content: stretch;
	align-content: flex-start;
	align-content: flex-end;
	align-content: center;
	align-content: space-between;
	align-content: space-around;

	/* flex-direction, flex-wrapをまとめて指定 */
	flex-flow: row nowrap;
}

子要素

子要素（フレックスアイテム）のプロパティ一覧

.child1 {
	/* 子要素の伸びを指定（0:伸びない、1:均等、2:他の2倍伸びる） */
	flex-grow: 0;

	/* 子要素の縮みを指定（1:均等、0:縮まない） */
	flex-shrink: 1;

	/* 子要素の初期サイズを指定（auto:コンテンツのサイズ、0:サイズなし） */
	flex-basis: auto;

	/* 子要素の垂直方向の位置を指定 */
	align-self: auto;

	/* 子要素の並び順を指定 */
	order: 0;

	/* flex-grow, flex-shrink, flex-basisをまとめて指定 */
	flex: 0 1 auto ;
}