要素のレイアウト(flexbox)プロパティの仕様と使い方

カテゴリ:CSS編

flexboxプロパティの概要

flexboxは、要素をレイアウトする際に、レイアウトする要素を格納する箱となる要素(親、コンテナ)と、レイアウトする要素(子、アイテム)で構成するという考え方をします。それぞれflexboxコンテナflexboxアイテムと呼びます。
floatとは異なり、flexboxは親となる要素が明確に定義されるため、親の外側にレイアウトの影響が及ぶことはありません。これがflexboxの大きな特徴です。
そのためfloatを解除するclear:bothのような指定は必要ありません。

それでは、flexboxコンテナ(親)とflexboxアイテム(子)を順番に解説していきます。

flexboxコンテナ

flexboxコンテナは、flexboxアイテムを格納する親となる要素であり、子をどのように配置するかを定義します。
displayプロパティにflexまたはinline-flexの値を指定すれば、その要素は自動でflexboxコンテナ、その子要素はflexboxアイテムとなります

例)

.flexbox-container { display: flex; }

flexboxコンテナで使用可能なプロパティ

flexboxコンテナでは、以下のプロパティが使用可能です。

flex-direction flexboxアイテムの方向や向きを定義します。 横並び(row)、逆順の横並び(row-reverse)、縦並び(column)、逆順の縦並び(column-reverse)のキーワードが指定可能です。
flex-wrap flexboxアイテムの折り返しを定義します。 折り返さない(nowrap)、折り返す(wrap)、上方向に折り返す(wrap-reverse)のキーワードが指定可能です。
flex-flow flex-directionプロパティとflex-wrapプロパティをまとめて指定できます。

例)
.flexbox-container { display: flex; flex-flow: row wrap; }

justify-content flexboxアイテムを横並びに配置する場合の配置方法を定義します。
左揃え(flex-start)、右揃え(flex-end)、中央揃え(center)、親要素との余白なしで均等並べ(space-between)、親要素との余白ありで均等並べ(space-around)のキーワードが指定可能です。
align-items flexboxアイテムを縦並びに配置する場合の配置方法を定義します。
親要素または一番高い子要素の高さを基準に並べる(stretch)、親要素の開始位置から下に向かって並べる(flex-start)、親要素の終了位置から上に向かって並べる(flex-end)、中央揃え(center)、ベースライン揃え(baseline)のキーワードが指定可能です。
align-content 複数のflexboxアイテムを縦並びに配置する場合の配置方法を定義します。
flexboxアイテムを縦並びに配置する場合の配置方法を定義します。
親要素または一番高い子要素の高さを基準に並べる(stretch)、親要素の開始位置から下に向かって並べる(flex-start)、親要素の終了位置から上に向かって並べる(flex-end)、中央揃え(center)、親要素との余白なしで均等並べ(baseline)、親要素との余白ありで均等並べ(space-around)のキーワードが指定可能です。

例)

基となるHTML:

<div class="flexbox-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

中央揃えで横並び:

.flexbox-container { display: flex; justify-content: center; }
.flexbox-container > div { padding: 10px; height: 1.2em; background-color: aquamarine; border: limegreen 1px solid; }
1
2
3
4
5

左揃えで横並び:

.flexbox-container { display: flex; justify-content: left; }
.flexbox-container > div { padding: 10px; height: 1.2em; background-color: aquamarine; border: limegreen 1px solid; }
1
2
3
4
5

親要素との余白なしで横並びで均等に配置:

.flexbox-container { display: flex; justify-content: space-between; }
.flexbox-container > div { padding: 10px; height: 1.2em; background-color: aquamarine; border: limegreen 1px solid; }
1
2
3
4
5

親要素との余白ありで横並びで均等に配置:

.flexbox-container { display: flex; justify-content: space-around; }
.flexbox-container > div { padding: 10px; height: 1.2em; background-color: aquamarine; border: limegreen 1px solid; }
1
2
3
4
5

逆順での横並び:

.flexbox-container { display: flex; flex-direction: row-reverse; }
.flexbox-container > div { padding: 10px; height: 1.2em; background-color: aquamarine; border: limegreen 1px solid; }
1
2
3
4
5

縦並び:

.flexbox-container { display: flex; flex-direction: column; }
.flexbox-container > div { padding: 10px; height: 1.2em; background-color: aquamarine; border: limegreen 1px solid; }
1
2
3
4
5

逆順での縦並び:

.flexbox-container { display: flex; flex-direction: column-reverse; }
.flexbox-container > div { padding: 10px; height: 1.2em; background-color: aquamarine; border: limegreen 1px solid; }
1
2
3
4
5

flexboxアイテム

flexboxコンテナ内に配置された要素はすべてそのflexboxコンテナの子(flexboxアイテム)となります。
flexboxアイテムの並べ方はflexboxコンテナ側で定義するため、通常、flexboxアイテム側では特別なレイアウトの定義は不要です。そのためシンプルなレイアウトであれば、flexboxアイテム側の要素ではレイアウトを気にする必要はありません。

少し複雑なレイアウトを構成する場合など、子要素側でflexboxアイテムのプロパティを用いて並び方を指定することも可能です。

flexboxアイテムで使用可能なプロパティ

flexboxアイテムでは、以下のプロパティが使用可能です。

order flexboxアイテムの並び順を定義します。
flex-grow flexboxアイテムを並べ終えた後に親要素に余ったスペースがあれば伸長させます。
flex-shrink flexboxアイテムを並べ終えた後に親要素のスペースが足りない場合に縮小させます。
flex-basis flexboxアイテムの幅を定義します。
widthプロパティと同様にpxや%などで指定します。
flex flex-growプロパティ、flex-shrinkプロパティ、flex-basisプロパティをまとめて指定できます。
align-self flexboxアイテムの垂直方向の配置を定義します。
親要素のalign-items値を継承(auto)、親要素または一番高い子要素の高さを基準に配置(stretch)、親要素の開始位置を基準に配置(flex-start)、親要素の終了位置を基準に配置(flex-end)、中央揃え(center)、ベースライン揃え(baseline)のキーワードが指定可能です。

例)

基となるHTML:

<div class="flexbox-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

並び順を指定:

.flexbox-container { display: flex; }
.flexbox-container > div { padding: 10px; height: 1.2em; background-color: aquamarine; border: limegreen 1px solid; }
.flexbox-container > div:nth-child(1) { order: 2; }
.flexbox-container > div:nth-child(2) { order: 1; }
.flexbox-container > div:nth-child(3) { order: 4; }
.flexbox-container > div:nth-child(4) { order: 5; }
.flexbox-container > div:nth-child(5) { order: 3; }
1
2
3
4
5

最後の子要素を伸長:

.flexbox-container { display: flex; }
.flexbox-container > div { flex-grow: 1; padding: 10px; height: 1.2em; background-color: aquamarine; border: limegreen 1px solid; }
.flexbox-container > div:last-child { flex-grow: 3; }
1
2
3
4
5

子要素を親要素の高さいっぱいまで伸ばす:

.flexbox-container { display: flex; height: 5.0em; }
.flexbox-container > div { align-self: stretch; padding: 10px; background-color: aquamarine; border: limegreen 1px solid; }
1
2
3
4
5

垂直方向の中央に配置:

.flexbox-container { display: flex; height: 5.0em; }
.flexbox-container > div { align-self: center; padding: 10px; height: 1.2em; background-color: aquamarine; border: limegreen 1px solid; }
1
2
3
4
5

奇数番目の子要素を親要素の下側に配置:

.flexbox-container { display: flex; height: 5.0em; }
.flexbox-container > div { align-self: auto; padding: 10px; height: 1.2em; background-color: aquamarine; border: limegreen 1px solid; }
.flexbox-container > div:nth-child(odd) { align-self: flex-end; }
1
2
3
4
5

以上、flexboxによるレイアウト設定について解説いたしました。

公開日時: 2019年07月13日  21:20:58

本格的なスキルを身につける

オンラインによるWebプログラミングスクールの無料レッスンを受けてみたい方はTechAcademyの無料体験がおすすめですよ。

CSS編に戻る

「CSS編」に関する他の手順
「CSS編」に関するTips

「CSS編」に関するTipsはありません。

このページのトップに戻る