CSS

Flexbox

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

Flexboxの基本的な書き方

Sample

Item 1
Item 2
Item 3
Item 4

HTML source


<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>

CSS source


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;を指定するだけです。

Sample 2

Item 1
Item 2
Item 3
Item 4

CSS source


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

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

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

Sample 3

Item 1
Item 2
Item 3
Item 4

CSS source


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

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

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

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

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

row（初期値）

Item 1
Item 2
Item 3
Item 4

row-reverse

Item 1
Item 2
Item 3
Item 4

column

Item 1
Item 2
Item 3
Item 4

column-reverse

Item 1
Item 2
Item 3
Item 4

CSS source


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（子要素の折り返し）

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

nowrap（初期値）

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30

wrap

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30

wrap-reverse

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30

CSS source


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。

CSS source


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

row-reverse wrap-reverse（右から左に下から上に）

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30

row-reverse wrap-reverse（右から左に下から上に）

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

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

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

flex-start（初期値）

Item 1
Item 2
Item 3

flex-end

Item 1
Item 2
Item 3

center

Item 1
Item 2
Item 3

space-between

Item 1
Item 2
Item 3

space-around

Item 1
Item 2
Item 3

CSS source


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（垂直方向の揃え）

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

stretch（初期値）

abc
def
ghi
jkl

flex-start

abc
def
ghi
jkl

flex-end

abc
def
ghi
jkl

center

abc
def
ghi
jkl

baseline

abc
def
ghi
jkl
align-items: baseline; のベースラインの位置
ベースラインの位置

CSS source


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は無効になります。

stretch（初期値）

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

flex-start

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

flex-end

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

center

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

space-between

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

space-around

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

CSS source


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 プロパティを使えば任意の順で並べ替えられます。

stretch（初期値）

Item 1order:0
Item 2order:1
Item 3order:-1
Item 4order:3
Item 5order:2
Item 6order:2

CSS sample


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。マイナス値を含む数値のみ指定できます。