要素のレイアウト（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

なお、レンタルサーバー選びで迷ったらこちらの記事で主要レンタルサーバーのプランと料金を比較していますので、是非参考にしてみてください。

CSS編に戻る

「CSS編」に関する他の手順
カテゴリ一覧

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