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;

	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;

	2つを一括指定
	flex-flow: row nowrap;
}

子要素

子要素のプロパティ一覧

.child1 {
	flex-grow: 0;

	flex-shrink: 1;

	flex-basis: auto;

	align-self: auto;

	order: 0;

	3つを一括指定
	flex: 0 1 auto ;
}