応用72.フレックスボックス

フレックスボックスとは

従来、ブロックレベル要素を横に並べる場合、floatやdisplay: inline-block;。
または、table関連のdisplayの値(table, table-row, table-cell)を利用することが一般的でした。
ですが、本来の使い方ではないため、正常に表示させるための対策が必要だったり、使用できないプロパティが発生するなどの問題がありました。

フレックスボックスは、これらの問題を回避し、レスポンシブサイトにも柔軟な対応を可能にする新しいCSSレイアウトの手法です。
ただし、フレックスボックスは、関係するプロパティが多く、応用の範囲が広いため、一つ一つのプロパティの特徴のしっかり把握し、どのような設定ができるか予測するには時間がかかります。

当サイトでは、すべてのフレックスボックスに関するプロパティは紹介しません。
比較的、理解しやすく、使いやすいものだけにしぼって紹介しています。
また、各プロパティの説明は、flex-direction: row;を基準とし、横に並べるレイアウトを基準に説明していますので、ご注意ください。
より詳細な情報を得たい方は、下記を参照ください。

フレックスボックスの基本と注意点

フレックスボックスは、フレックスコンテナー(親要素)内で、フレックスアイテム(子要素)が横並び、または、縦に並ぶように制御されます。

注意点としては、下記があげられます。

  • フレックスボックスの効果は、親子のみに適用され、孫要素には継承しない。
  • フレックスアイテムのdisplayの設定値は無効になり、フレックスコンテナーの制御下になる。
  • フレックスアイテムは、親要素から幅を継承しない。
  • フレックスアイテムのmarginは、アイテムの上下の相殺は発生するが、フレックスコンテナー(親要素)への相殺は発生しない。この挙動は、floatと同じです。

フレックスボックスの初期値

フレックスボックスは、フレックスコンテナーに、display: flex;または、display: inline-flex;を指定することで発動します。
フレックスボックスを適用すると、フレックスコンテナーは、下記のプロパティと値が自動的に設定されます。

フレックスアイテムは、下記のプロパティと値が自動的に設定されます。

フレックスコンテナーのプロパティ

フレックスボックスは、フレックスコンテナー(親要素)で、フレックスアイテム(子要素)の制御を行います。
そのため、ほとんどのプロパティは、フレックスコンテナー側で指定を行います。

display:flex(inline-flex)

flex

フレックスボックスを発動させるための指定です。
指定したフレックスコンテナーの要素は、display: block;と同じ特徴になります。

  • 次の要素が折り返す。
  • 親から幅(width)を継承する。
  • margin, paddingが使える。

.flex-container{ display: flex; }

inline-flex

フレックスボックスを発動させるための指定です。
指定したフレックスコンテナーの要素は、display: inline-block;と同じ特徴になります。

  • 次の要素が折り返さない。
  • 親から幅(width)を継承しない。
  • text-alignの影響を受ける。
  • margin, paddingが使える。(margin: auto;は使えない)

.flex-container{ display: inline-flex; }

flex-wrapプロパティ

フレックスアイテムを1行内に押し込めるか、複数行に折り返すかの指定です。

flex-wrapの値

nowrap

初期値。フレックスアイテムを1行内に押し込めます。
各アイテムの幅と左右の余白の合算値が親要素の幅を超えると、各アイテムの幅と余白が自動調整されます。
そのため、アイテムが折り返すことがありません。
注意点は、アイテムの幅の相対値(%)は、親要素の幅を基準としません。
各アイテムをwidth: 100%;にした場合、すべてのアイテムが親要素の幅に、隙間なく収まる形になります。


.flex-container{
  display: flex;
	flex-wrap: nowrap; /* 初期値のため、省略可。 */
}

wrap

nowrapと違い、アイテムの幅の合算値が親要素の幅を超えると、アイテムが折り返します。
また、アイテムの幅の相対値(%)は、nowrapと違い、親要素の幅を基準にします。


.flex-container{
  display: flex;
  flex-wrap: wrap;
}

wrap-reverse

行の並び順が反転します。ただし、行ごとのアイテムの順序はそのままです。
行が折り返さない場合、wrapと変わりません。特徴も、wrapと同様です。


.flex-container{
  display: flex;
  flex-wrap: wrap-reverse;
}

justify-contentプロパティ

行ごとに、アイテムの左右方向の調整(行ぞろえ)を行います。

justify-contentの値

flex-start

初期値。行内のアイテムは、左ぞろえで並びます。


.flex-container{
  display: flex;
  justify-content: flex-start; /* 初期値のため、省略可。 */
}

center

行内のアイテムは、中央ぞろえで並びます。


.flex-container{
  display: flex;
  justify-content: center;
}

flex-end

行内のアイテムは、右ぞろえで並びます。


.flex-container{
  display: flex;
  justify-content: flex-end;
}

space-evenly

行内のアイテムを左右均等ぞろえで並べます。
余白は、アイテム間で均等に配分されます。
行のアイテム数により、余白は変動します。


.flex-container{
  display: flex;
  justify-content: space-evenly;
}

space-between

行内のアイテムを左右均等ぞろえで並べます。
space-evenlyと違い、行内の最初のアイテムの左と最後のアイテムの右の余白がなくなります。
行のアイテム数により、余白は変動します。


.flex-container{
  display: flex;
  justify-content: space-between;
}

space-around

行内のアイテムを左右均等ぞろえで並べます。
余白は、アイテムの左右に均等に配分されます。
space-evenlyと違い、行内の最初のアイテムの左と最後のアイテムの右の余白が少なくなります。
行のアイテム数により、各行の余白は変動します。


.flex-container{
  display: flex;
  justify-content: space-around;
}

align-itemsプロパティ

行ごとのアイテムの上下方向の位置または、高さの自動調整を行います。
align-itemsプロパティは、行ごとに処理が行われるため、行ごとにアイテムの高さや位置が変化する場合があります。

align-itemsの値

stretch

初期値。行内のアイテムの高さの最大値に、各アイテムの高さがそろうようになります。
最大値は、行ごとに再計算されます。

アイテムが、imgタグの場合、自動調整が働き画像の比率が変わってしまいます。
divタグなどで囲んでおくとよいでしょう。


.flex-container{
  display: flex;
  align-items: stretch; /* 初期値のため、省略可。 */
}

flex-start

行ごとに、アイテムが上ぞろえで並びます。
アイテムの高さの自動調整は無効になります。


.flex-container{
  display: flex;
  align-items: flex-start;
}

center

行ごとに、アイテムが上下の中央に並びます。
アイテムの高さの自動調整は無効になります。


.flex-container{
  display: flex;
  align-items: center;
}

flex-end

行ごとに、アイテムが下ぞろえで並びます。
アイテムの高さの自動調整は無効になります。


.flex-container{
  display: flex;
  align-items: flex-end;
}

baseline

行ごとに、アイテム内のテキストのベースラインにそろうように、上下の位置を調整します。
アイテムの高さの自動調整は無効になります。


.flex-container{
  display: flex;
  align-items: baseline;
}

align-contentプロパティ

align-itemsプロパティと違い、フレックスコンテナーを基準に、行単位で、高さの調整または、上下の位置調整が行われます。

align-contentの値

stretch

初期値。
フレックスコンテナーの高さで、行の高さが調整されます。
複数行の場合は、フレックスコンテナーの高さを行数で配分し、調整されます。


.flex-container{
  display: flex;
  align-content: stretch; /* 初期値のため、省略可。 */
}

flex-start

フレックスコンテナーの高さを基準に、行が上ぞろえで並びます。
行の高さの自動調整は無効になります。


.flex-container{
  display: flex;
  align-content: flex-start;
}

center

フレックスコンテナーの高さを基準に、行が上下の中央に並びます。
行の高さの自動調整は無効になります。


.flex-container{
  display: flex;
  align-content: center;
}

flex-end

フレックスコンテナーの高さを基準に、行が下ぞろえで並びます。
行の高さの自動調整は無効になります。


.flex-container{
  display: flex;
  align-content: flex-end;
}

space-around

フレックスコンテナーの高さを基準に、行が上下に均等に配分されます。
余白は、各行の上下に均等に配分されます。
行の高さの自動調整は無効になります。


.flex-container{
  display: flex;
  align-content: space-around;
}

space-between

フレックスコンテナーの高さを基準に、行が上下に均等に配分されます。
space-aroundと違い、先頭行の上と最終行の下の余白がなくなります。
行の高さの自動調整は無効になります。


.flex-container{
  display: flex;
  align-content: space-between;
}

flex-directionプロパティ

アイテムを行方向または列方向に並べるかの指定が行えます。

flex-directionの値

row

初期値。float: left;と似た挙動になります。
次のアイテムが右に回り込みます。結果、アイテムは左ぞろえになります。


.flex-container{
  display: flex;
  flex-direction: row; /* 初期値のため、省略可。 */
}

row-reverse

float: right;と似た挙動になります。
次のアイテムが左に回り込みます。結果、アイテムは、右ぞろえとなります。
flex-wrap: wrap;の場合、行ごとにアイテムの順番が反転します。


.flex-container{
  display: flex;
  flex-direction: row-reverse;
}

column

rowと違い、列でアイテムが並びます。
アイテムは、上から下の順番に並びます。
flex-wrap: wrap;の場合、折り返したアイテムは、右側に並びます。

注意点としては、行と列の調整のプロパティが、rowと逆になります。
下記のプロパティが影響を受けます。


.flex-container{
  display: flex;
  flex-direction: column;
}

column-reverse

columnと違い、下から上に向かって、アイテムが並びます。
flex-wrap: wrap;の場合、収まらないアイテムは、右側に並びます。
columnと同様、行と列の調整のプロパティが、row-reverseと逆になります。


.flex-container{
  display: flex;
  flex-direction: column-reverse;
}

gapプロパティ

アイテム間の余白は、marginで指定可能です。
ただし、上下の相殺や各アイテムの外側の対処など、設定が複雑になりがちです。
gapプロパティは、その問題を回避するベストなプロパティです。
gapで指定した余白は、アイテムが隣接する場合のみ発生し、相殺もありません。

marginとgapの違い

IEは、gapプロパティに対応していません。

gapの値は、4方向一括または、上下、左右ごとに指定します。
上下方向の%指定はできません。


.flex-container{
  display: flex;
  gap: 20px; /* 4方向 */
}


.flex-container{
  display: flex;
  gap: 20px 5%; /* 上下、左右 */
}

フレックスアイテムのプロパティ

フレックスアイテムは、フレックスコンテナーの子要素です。

orderプロパティ

各アイテムの順序を変更できます。
初期値は、0。
指定した数値が大きいほど、後方に移動します。

下記のコードは、アイテム1を後方に移動させる指定です。


<ul class="flex-container">
  <li class="order">アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>


.flex-container{ display: flex; }
.order{ order: 1; }

align-selfプロパティ

align-itemsの設定をアイテムごとに上書きできます。
初期値のautoは、align-itemsの設定に準じます。
上書きできる値や特徴は、align-itemsと同じです。

下記のコードは、アイテム2のみ、下ぞろにする指定です。


<ul class="flex-container">
  <li>アイテム1</li>
  <li class="flex-end">アイテム2</li>
  <li>アイテム3</li>
</ul>


.flex-container{
  display: flex;
  align-items: flex-start;
}
.flex-end{ align-self: flex-end; }

まとめ

  • フレックスボックスは、display: flex; または、inline-flexで発動。
  • フレックスコンテナーは、親要素。
  • フレックスアイテムは、子要素。
  • ほとんどのプロパティは、フレックスコンテナーで指定する。
  • flex-wrapは、アイテムを行に押し込めるか、折り返すかの指定。
  • justify-contentは、左右方向の位置調整。
  • align-itemsは、アイテムの上下の位置調整。
  • align-contentは、フレックスコンテナー内の行の上下の位置調整。
  • flex-directionは、行方向、列方向の向きの切り替え。
  • gapは、アイテム間の余白の指定。
  • orderは、アイテムの順番を変更できる。
  • align-selfは、アイテムごとに、align-itemsの上書きできる。