Flexbox

Flexboxは、1つの軸に沿って要素を並べるCSSの仕組みです。横並び・縦並び・間隔・整列を基本例で説明します。

Flexboxの基本と各プロパティ

　FlexboxとはFlexble Box Layout Moduleのことで、その名の通りフレキシブルでかんたんにレイアウトが組めるボックスです。現在ほとんどすべての最新ブラウザでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるかもしれません。

Flexboxの基本的な書き方

<div class="container">
	<div class="item">Item 1</div>
	<div class="item">Item 2</div>
	<div class="item">Item 3</div>
	<div class="item">Item 4</div>
</div>

div.container {
	background-color: silver;
	padding: 5px;
}

div.item {
	background-color: gray;
	margin: 5px;
	padding: 5px;
}

　Flexコンテナーと呼ばれる親要素の中に、Flexアイテムと呼ばれる子要素を入れてHTMLは完了です。

　上記の例では親要素である「container」というクラスの付いたdiv要素の中に、子要素である「item」というクラスの付いたdiv要素が入っています。

　このままでは、子要素が縦に並んでいる状態ですが、Flexboxを使って子要素を横並びにするには、親要素にdisplay: flex;を指定するだけです。

div.container {
	background-color: silver;
	padding: 5px;
	display: flex;
}

　これで子要素が横並びになったと思います。

　インライン要素に使うのであれば、親要素にdisplay: inline-flex;を指定します。

div.container {
	background-color: silver;
	padding: 5px;
	display: inline-flex;
}

親要素（Flexコンテナー）に指定するプロパティ

　Flexboxでは親要素に指定するプロパティと子要素に指定するプロパティが存在します。指定する要素を間違えないように注意が必要です。

flex-direction（子要素の並ぶ向き）

　子要素をどの方向に配置していくかを指定するプロパティです。横または縦に配置できます。

div.container {
	background-color: silver;
	padding: 5px;
	display: flex;
	flex-direction: row;
}

flex-directionで使える値

row（初期値）

子要素を左から右に配置

row-reverse

子要素を右から左に配置

column

子要素を上から下に配置

column-reverse

子要素を下から上に配置

※「row」と「row-reverse」はRTL（Right To Left ＝ 右から左）の時は逆向きに配置されます。

flex-wrap（子要素の折り返し）

子要素を一行、または複数行に並べるかを指定します。複数行にする場合は子要素が親要素の幅を超えてしまった場合、折り返して複数行に配置されていきます。

div.container {
	background-color: silver;
	padding: 5px;
	display: flex;
	flex-wrap: nowrap;
}

flex-wrapで使える値

nowrap（初期値）

子要素を折り返しせず、一行に並べる

wrap

子要素を折り返し、複数行に上から下へ並べる

wrap-reverse

子要素を折り返し、複数行に下から上へ並べる

flex-flow（flex-directionとflex-wrapをまとめて指定）

　flex-directionとflex-wrapを一行で指定できるプロパティ。初期値はrow nowrap。

div.container {
	background-color: silver;
	padding: 5px;
	display: flex;
	flex-flow: row nowrap;
}

justify-content（水平方向の揃え）

　親要素に空きスペースがあった場合、子要素を水平方向のどの位置に配置するかを指定します。

div.container {
	background-color: silver;
	padding: 5px;
	display: flex;
	justify-content: flex-start;
}

justify-contentで使える値

flex-start（初期値）

行の開始位置から配置。左揃え。

flex-end

行末から配置。右揃え。

center

中央揃え。

space-between

最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置。

space-around

両端の子要素も含め、均等に間隔をあけて配置。

※「flex-start」と「flex-end」はRTL（Right To Left ＝ 右から左）の時は逆向きに配置されます。

align-items（垂直方向の揃え）

　親要素の空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定します。

div.container {
	background-color: silver;
	padding: 5px;
	display: inline-flex;
	align-items: stretch;
}

align-itemsで使える値

stretch（初期値）

親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置。

flex-start

親要素の開始位置から配置。上揃え。

flex-end

親要素の終点から配置。下揃え。

center

中央揃え。

baseline

ベースラインで揃える。

align-content（複数行にした時の揃え）

　子要素が複数行に渡った場合の垂直方向の揃えを指定します。flex-wrap: nowrap; が適用されていると子要素が一行になるので、align-contentは無効になります。

div.container {
	background-color: silver;
	padding: 5px;
	display: inline-flex;
	align-content: stretch;
}

align-contentで使える値

stretch（初期値）

親要素の高さに合わせて広げて配置。

flex-start

親要素の開始位置から配置。上揃え。

flex-end

親要素の終点から配置。下揃え。

center

中央揃え。

space-between

最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置。

space-around

上下端にある子要素も含め、均等に間隔をあけて配置。

子要素（Flexアイテム）に指定するプロパティ

　display: flex; が指定された要素の中にある子要素（Flexアイテム）に指定するプロパティです。親要素に display: flex; が指定されていないと動作しないので注意しましょう。

order（順序の指定）

　通常子要素はHTMLの記述順に配置されますが、order プロパティを使えば任意の順で並べ替えられます。

div.item1 {
	background-color: gray;
	margin: 5px;
	padding: 5px;
	width: 70px;
	text-align: center;
	order: 0;
}

div.item2 {
	・・・・
	order: 1;
}

div.item3 {
	・・・・
	order: -1;
}

div.item4 {
	・・・・
	order: 3;
}

div.item5 {
	・・・・
	order: 2;
}

div.item6 {
	・・・・
	order: 2;
}

orderで使える値

初期値は0。マイナス値を含む数値のみ指定できます。