CSSの基本！横並びなどフレキシブルに対応する「Flexボックス」

2021/11/15 13:46

web

loading=”lazy” width=”700″ height=”200″

(※2021年11月15日最新情報更新)

「CSSの勉強を始めてみたけど、Flexboxが理解できない」
「Flexboxが便利なのは知っているけど使いこなせい」

CSSの勉強を始めたばかりの方にとって最初の難関となるのが「Flexbox」ではないでしょうか？

Flexboxは、CSSによるレイアウト作成でよく使われ、今やホームページを作成するために必須ともいえるレイアウト手法のひとつです。

※2021年現在、Flexboxは各主要ブラウザ(Chrome、Ege、Firefox、Safari)に対応。
(IE10未満には非対応。IE10以降でもバグが発生する可能性があるため、IEは確認が必要。)

扱いやすいプロパティの1つなので、一度使い方を覚えれば便利です。使いこなせるようになっていただけるよう、初心者の方に向けてFlexboxの使い方についてご紹介していきます。

Flexboxとは？

Flexboxは、CSS3の導入から使用できるようになったプロパティで、正式名称は「Flexible Box Layout Module」。主に、要素を横や縦に並べるときに使われます。

Flexboxが誕生するまでは、要素を並べる際、floatやdisplayプロパティが使用されていました。

Flexboxの誕生により、2021年現在では、Flexboxを使ってレイアウトを作成することが主流となっています。

また、レスポンシブに簡単に対応できるのも、Flexプロパティの大きなメリットです。

【CSS】positionの基礎を徹底攻略！

CSSを学び始めた初心者の方にむけて、positionプロパティの基礎を紹介しています。身に着けるとに非常に便利なプロパティですので、ぜひこの記事を参考に習得してみてください。

『Flexbox』の基本

Flexboxを使用するためには、まず要素に下記のCSSを記述する必要があります。


.クラス名 {
display: frex;
}

またFlexboxは、flexコンテナとflexアイテムと呼ばれる2つの要素で構成されているため、flexコンテナとflexアイテムの組み合わせでレイアウトを作成します。

Flexコンテナ：Flexを設定した親要素
Flexアイテム：Flexコンテナの子要素

Flexコンテナ (Flex container)

『Flexコンテナ』とはflexが設定される枠となる要素のことです。子要素をフレキシブルに配置可能になります。

『display: flex』、または『display: inline-flex』を指定された要素がFlexコンテナになります。

次の画像のオレンジ色の範囲がFlexコンテナにあたります。

Flexコンテナの範囲

Flexアイテム (Flex item)

『Flexアイテム』とは、Flexコンテナ内でフレキシブルに配置可能な要素で、Flexコンテナの子要素のことを指します。

子要素のみ対象になるので、孫要素以降には影響しません。

次の画像のオレンジ色の範囲がFlexアイテムにあたります。

Flexアイテムの範囲

Flexレイアウトの要！Flexコンテナで使用するプロパティについて

Flexコンテナは、『軸』と『方向』の概念を持っています。縦と横、どちらを主軸にするかを決めて、どの方向に向けて並べるかを設定することで要素を配置します。

それぞれ、CSSプロパティで設定することが可能です。

Flexコンテナで使用する主なプロパティは次の5つです。

flex-direction：Flexアイテムの方向を決める
flex-wrap：Flexアイテムの折り返し
justify-content：Flexアイテムを水平方向に配置
align-items：Flexアイテムを垂直方向に配置
align-content：Flexアイテムの行を垂直方向の位置に指定

以下で、実際の変更例を掲載いたします。上記のHTMLソースコードはそのまま使い、CSSだけを変更してレイアウトを組んでいます。

Flexアイテム (Flex item)

Flexコンテナの主軸、Flexアイテムを並べる方向を決めるプロパティ。

縦か横か。横なら左から右に向かわせるのか、それとも逆方向か、などなど。

flex-direction: row;

主軸を横に設定し、Flexアイテムを横に並べます。


.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

flex-direction: row-reverse;

主軸を横に設定し、Flexアイテムを横に並べます。さらに右から左に向かって並ぶよう設定します。


.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row-reverse;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

flex-direction: column;

主軸を縦に設定し、Flexアイテムを縦に並べます。


.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: column;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

flex-direction: column-reverse;

主軸を縦に設定し、Flexアイテムを縦に並べます。さらに下から上に向かって並ぶよう設定します。


.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: column-reverse;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

flex-wrap

Flexアイテムがコンテナの端についたとき、折り返すかを決めるプロパティです。折り返す方向は、flex-directionの値によって変化します。

以下の例では、flex-direction: rowが設定されている場合を想定しています。

flex-wrap: wrap;

Flexアイテムがコンテナの端に達したとき、折り返します。例は、flex-direction: rowが設定されているので、下に折り返されます。


.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex > *{
  min-width: 8%;
  flex-basis: 25%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

flex-wrap: nowrap;

基本折り返しません。Flexアイテムはコンテナの幅に収まるように縮小されます。


.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.flex > *{
  min-width: 8%;
  flex-basis: 25%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

flex-wrap: wrap-reverse;

Flexアイテムがコンテナの端に達したとき、通常とは逆方向に折り返します。

例は、flex-wrap: rowが設定されているので、通常は下に折り返されますが、wrap-reverseの場合は上に折り返されます。


.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}
.flex > *{
  min-width: 8%;
  flex-basis: 25%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

justify-content

主軸の始点側に詰めるか、終点側に詰めるか、それとも中央に寄せるかなど、整列方法を設定するプロパティです。

flex-wrap: nowrapが設定されていると、整列させるためのスペースが残らないことがあるため、一緒に使えない場合も少なくありません。

主軸の始点の位置は、flex-directionの値によって変化します。

以下の例では、flex-direction: rowが設定されている場合を想定しています。

justify-content: flex-start;

主軸の始点側に詰めて揃えます。

例はflex-direction: rowが設定されているので、左詰めになります。


.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

justify-content: flex-end;

主軸の終点側に詰めて揃えます。

例はflex-direction: rowが設定されているので、右詰めになります。


.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

justify-content: center;

主軸の中央に寄せるように揃えます。

例はflex-direction: rowが設定されているので、左右中央寄せになります。


.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

justify-content: space-between;

主軸の向きに沿って、最初のFlexアイテムが主軸の始点、最後のFlexアイテムが終点に接するように配置され、他のFlexアイテムを等間隔で並べます


.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

justify-content: space-around;

主軸の向きに沿ってFlexアイテムに同じ大きさのスペースを入れて並べます。

例はflex-direction: rowが設定されているので、Flexアイテムの左右にスペースが設定されます。

justify-content: space-aroundを設定した際のイメージ


.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

align-items

Flexアイテムを交差軸の始点側に詰めてに揃えるか、終点側に揃えるか、中央に寄せるかなど、交差軸をもとに主軸と垂直の方向の整列方法を設定するプロパティです。

交差軸の始点の位置は、flex-directionの値によって変化します。

以下の例では、flex-direction: rowが設定されている場合を想定していますので、縦方向の配置を設定します。

また、わかりやすくするため、Flexコンテナの高さを固定値にしておきます。

align-items: stretch;

全てのFlexアイテムは、Flexコンテナの交差軸いっぱいに広がります。ただし、flex-wrap: wrapを指定していて、複数段にまたがる場合は、その段にある交差軸が最も長いFlexアイテムに揃えられます。

例はflex-direction: rowが設定されているため、縦いっぱいまで広がります。


.flex{
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

※補足

今回、Flexアイテムの表示の変化をわかりやすくするために、Flexコンテナの高さを固定値にして表示していますが、固定値でなくてもalign-itemsにstretchが設定されている場合は、最もサイズの大きなFlexアイテムに合わせて変化します。

例のように、一つだけサイズが大きいFlexアイテムがあり、Flexコンテナにalign-items: flex-start;が設定されている場合、Flexアイテムの下部にスペースができてしまいます。

しかし、align-items: stretch;に変更すると、スペースを埋めるようにFlexアイテムの大きさが変わります。

align-items: flex-start;

Flexコンテナの交差軸の始点に詰められるように配置されます。

例はflex-direction: rowが設定されているため、Flexコンテナの上部に詰められます。


.flex{
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

align-items: flex-end;

Flexコンテナの交差軸の終点に詰められるように配置されます。

例はflex-direction: rowが設定されているため、Flexコンテナの下部に詰められます。


.flex{
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

align-items: center;

Flexコンテナの交差軸の中央に寄せられるように配置されます。

例はflex-direction: rowが設定されているため、Flexコンテナの上下中央に詰められます。


.flex{
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

align-items: baseline;

Flexアイテムのベースラインが揃うように配置されます。

例はflex-direction: rowが設定されているため、Flexコンテナの上下中央に詰められます。

また、それぞれのFlexアイテムの高さが違うほうがわかりやすいので、奇数番のFlexアイテムのみ、高さを変えています。


.flex{
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
}
.flex > *:nth-child(2n){
  padding-top: 10px;
  height: 150px;
}
.flex > *{
  min-width: 8%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

align-content

Flexアイテムが複数段にまたがった際、それぞれの段の軸をどのように配置するか設定するプロパティです。例ではわかりやすいように、高さを固定値にしております。

align-itemsと似ているプロパティですが、align-items主軸にあるFlexアイテムの配置を指定するのに対し、align-contentは軸自体の配置を指定する違いがあります。

align-content: flex-start;

主軸に属するFlexアイテムを交差軸の始点に詰めるように配置します。


.flex{
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: flex-start;
}
.flex > *{
  min-width: 8%;
  flex-basis: 15%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex > *:nth-child(2n){
  padding-top: 10px;
  height: 100px; 
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

align-content: flex-end;

主軸に属するFlexアイテムを交差軸の終点に詰めるように配置します。


.flex{
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: flex-end;
}
.flex > *{
  min-width: 8%;
  flex-basis: 15%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex > *:nth-child(2n){
  padding-top: 10px;
  height: 100px; 
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

align-content: center;

主軸に属するFlexアイテムを、交差軸の中央に寄せるように配置します。


.flex{
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: center;
}
.flex > *{
  min-width: 8%;
  flex-basis: 15%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex > *:nth-child(2n){
  padding-top: 10px;
  height: 100px; 
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

align-content: space-between;

最初と最後の主軸に属するFlexアイテムがコンテナに接するようにし、等間隔で配置する。


.flex{
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: space-between;
}
.flex > *{
  min-width: 8%;
  flex-basis: 15%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex > *:nth-child(2n){
  padding-top: 10px;
  height: 100px; 
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

align-content: space-around;

交差軸を基準にして、等間隔で配置されます。


.flex{
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: space-around;
}
.flex > *{
  min-width: 8%;
  flex-basis: 15%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex > *:nth-child(2n){
  padding-top: 10px;
  height: 100px; 
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}

align-content: stretch;

行間にスペースがあれば、それを埋めるようにFlexアイテムを広げます。


.flex{
  height: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
}
.flex > *{
  min-width: 8%;
  flex-basis: 15%;
  background: #fff;
  font-size: 64px;
  text-align: center;
}
.flex > *:nth-child(2n){
  padding-top: 10px;
  height: 100px; 
}
.flex,
.flex > *{
  border: 3px solid #aaa;
}