CSS Flexboxとは?使い方を徹底解説

CSS Flexboxとは?使い方を徹底解説

 更新日:

LINEで送る
Pocket

CSS Flexboxとは?使い方を徹底解説

CSSのFlexboxの使い方を今更ながら解説していこうと思います。
Flexboxは、自分的に若干取っ掛かりにくさがあったので、できるだけ詳しくご紹介できればと思います。



この記事の目次

Flexboxとは?

まずは、Flexboxとは何か?を見ていきましょう。
正式名称は「CSS Flexible Box Layout」であり、簡単に言うと「より柔軟なレイアウトを作成できる」CSSのモジュールです。以前は「table」タグや「float」プロパティか主流だったレイアウトの作成方法ですが、Flexboxを使用すると、より柔軟に、そしてより簡単に作成することができます。

Flexboxの使い方

では、Flexboxの使い方です。といきたいところですが、使い方の前に重要な部分を説明します。それは、「flexコンテナ」と「flexアイテム」についてです。これを理解していないままだとなかなか理解が進まないように思います。
それぞれ分けて説明していきます。

flexコンテナとflexアイテムとは?

flexコンテナとは、Flexboxを適用する範囲を示すコンテナのことです。簡単に言うと「親要素」となります。一方で、flexアイテムとは、「子要素」だと考えてください。下図にまとめました。

flexコンテナとflexアイテム

この部分を把握せずに進めると理解するのが難しくなると思いますので、まずは、「親要素=flexコンテナ」と「子要素=flexアイテム」ということを理解しましょう。

flexコンテナを作成

まずは、flexコンテナ(親要素)を作成します。今回は、「container」クラスが親要素とします。

.container{
  display: flex;
}

このように指定します。「display: flex;」を指定することで、Flexboxが適用されます。たったこれだけで、Flexboxを使う準備は完了です。

flexコンテナに指定するプロパティ一覧

flexコンテナ(親要素)に指定できるプロパティを見ていきます。まずは、共通のHTMLを想定します。

HTML(共通)

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

これに、各プロパティを設定していきます。設定できるプロパティは以下の通りです。

  • flex-direction
    ・Flexアイテムの並び順を設定する。
  • flex-wrap
    ・Flexアイテムの折り返しを設定する。
  • flex-flow
    ・flex-direction(並び順)とflex-wrap(折り返し)を一括で設定する。
  • justify-content
    ・Flexアイテムの水平方向(横)の位置を設定する。
  • align-items
    ・Flexアイテムの垂直方向(縦)の位置を設定する。
  • align-content
    ・Flexアイテムが複数行の際の垂直方向(縦)の位置を設定する。

flex-direction

flex-directionプロパティは、flexアイテムの並び順を操作するプロパティです。4つの値が用意されており、それぞれ上下左右どの方向に並べていくかを設定します。

flex-directionプロパティに指定できる値

内容
row flexアイテムを水平方向(横)に左から右に配置する(デフォルト値)
row-reverse flexアイテムを水平方向(横)に右から左に配置する
column flexアイテムを垂直方向(縦)に上から下に配置する
colmn-reverse flexアイテムを垂直方向(縦)に下から上に配置する

flex-direction: row;

flexアイテムを水平方向(横)に左から右に配置する(デフォルト値)

.container{
  flex-direction: row;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

flex-direction: row-reverse;

flexアイテムを水平方向(横)に右から左に配置する

.container{
  flex-direction: row-reverse;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

flex-direction: column;

flexアイテムを垂直方向(縦)に上から下に配置する

.container{
  flex-direction: column;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

flex-direction: column-reverse;

flexアイテムを垂直方向(縦)に下から上に配置する

.container{
  flex-direction: column-reverse;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

flex-wrap

flex-wrapプロパティは、Flexアイテムの折り返しを設定するプロパティで、3つの値が用意されています。

flex-wrapプロパティに指定できる値

内容
nowrap flexアイテムを折り返さずに一列に配置する(デフォルト値)
wrap flexアイテムを複数行に折り返し、上から下に配置する
wrap-reverse flexアイテムを複数行に折り返し、下から上に配置する

flex-wrap: nowrap;

flexアイテムを折り返さずに一列に配置する(デフォルト値)

.container{
  flex-wrap: nowrap;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3
  • Flexアイテム4
  • Flexアイテム5
  • Flexアイテム6
  • Flexアイテム7
  • Flexアイテム8
  • Flexアイテム9

flex-wrap: wrap;

flexアイテムを複数行に折り返し、上から下に配置する

.container{
  flex-wrap: wrap;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3
  • Flexアイテム4
  • Flexアイテム5
  • Flexアイテム6
  • Flexアイテム7
  • Flexアイテム8
  • Flexアイテム9

flex-wrap: wrap;

flexアイテムを複数行に折り返し、下から上に配置する

.container{
  flex-wrap: wrap;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3
  • Flexアイテム4
  • Flexアイテム5
  • Flexアイテム6
  • Flexアイテム7
  • Flexアイテム8
  • Flexアイテム9

flex-flow

flex-flowプロパティは、flex-direction(並び順)とflex-wrap(折り返し)を一括で設定します。値には、flex-directionの値、flex-wrapの値の順に並べて記述します。

.container{
  flex-flow: flex-directionの値 flex-wrapの値;
}

例)flex-directionの値がrow、flex-wrapの値がwrapの場合

.container{
  flex-flow: row wrap;
}

justify-content

justify-contentプロパティは、Flexアイテムの水平方向(横)の位置を設定するプロパティで、5つの値が用意されています。

justify-contentプロパティに指定できる値

内容
flex-start flexアイテムを左揃えで配置する(デフォルト値)
flex-end flexアイテムを右揃えで配置する
center flexアイテムを中央揃えで配置する
space-between flexアイテムを両端に余白を空けずに配置し、それ以外のアイテムを均等配置する
space-around flexアイテムを均等配置する

justify-content:flex-start;

flexアイテムを左揃えで配置します。この値がデフォルト値です。

.container{
  justify-content:flex-start;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

justify-content:flex-end;

flexアイテムを右揃えで配置します。

.container{
  justify-content:flex-end;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

justify-content:center;

flexアイテムを中央揃えで配置します。

.container{
  justify-content:center;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

justify-content:space-between;

flexアイテムを両端に余白を空けずに配置し、それ以外のアイテムを均等配置します。

.container{
  justify-content:space-between;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

justify-content:space-around;

flexアイテムを均等配置します。

.container{
  justify-content:space-around;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

align-items

align-itemsプロパティは、Flexアイテムの垂直方向(縦)の位置を設定するプロパティで、5つの値が用意されています。

align-itemsプロパティに指定できる値

内容
stretch flexアイテムの上下の余白を埋め、高さを揃える(デフォルト値)
flex-start flexアイテムを上揃えで配置する
flex-end flexアイテムを下揃えで配置する
center flexアイテムを上下中央揃えで配置する
baseline flexアイテムをベースラインに合わせて配置する

align-items:stretch;

flexアイテムの上下の余白を埋め、高さを揃えます。この値がデフォルト値です。下のプレビューでは「Flexアイテム2」のみ高さを変更しています。それに伴い、他のflexアイテムも高さが変更されていることが分かります。

.container{
  align-items:stretch;
}
  • Flexアイテム1
  • Flexアイテム2(高さ変更)
  • Flexアイテム3

align-items:flex-start;

flexアイテムを上揃えで配置します。

.container{
  align-items:flex-start;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

align-items:flex-end;

flexアイテムを下揃えで配置します。

.container{
  align-items:flex-end;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

align-items:flex-center;

flexアイテムを上下中央揃えで配置します。

.container{
  align-items:flex-center;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

align-items:flex-baseline;

flexアイテムをベースラインに合わせて配置します。

.container{
  align-items:flex-baseline;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

align-content

align-contentプロパティは、Flexアイテムが複数行の際の垂直方向(縦)の位置を設定するプロパティで、6つの値が用意されています。

align-contentプロパティに指定できる値

内容
stretch flexアイテムの上下の余白を埋めるように行の高さを揃える(デフォルト値)
flex-start flexアイテムの行flexコンテナに対して上揃えで配置する
flex-end flexアイテムの行をflexコンテナに対して下揃えで配置する
center flexアイテムの行をflexコンテナに対して上下中央揃えで配置する
space-between flexアイテムの一行目と最終行をflexコンテナに対して上下に余白を空けずに配置し、それ以外のアイテム行を均等配置する
space-around flexアイテムの行をflexコンテナに対して均等配置する

align-content:stretch;

flexアイテムの上下の余白を埋めるように行の高さを揃えます。この値がデフォルト値です。

.container{
  align-content:stretch;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3
  • Flexアイテム4
  • Flexアイテム5
  • Flexアイテム6
  • Flexアイテム7
  • Flexアイテム8
  • Flexアイテム9

align-content:flex-start;

flexアイテムの行をflexコンテナに対して上揃えで配置します。

.container{
  align-content:flex-start;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3
  • Flexアイテム4
  • Flexアイテム5
  • Flexアイテム6
  • Flexアイテム7
  • Flexアイテム8
  • Flexアイテム9

align-content:flex-end;

flexアイテムの行をflexコンテナに対して下揃えで配置します。

.container{
  align-content:flex-end;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3
  • Flexアイテム4
  • Flexアイテム5
  • Flexアイテム6
  • Flexアイテム7
  • Flexアイテム8
  • Flexアイテム9

align-content:center;

flexアイテムの行をflexコンテナに対して上下中央揃えで配置します。

.container{
  align-content:center;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3
  • Flexアイテム4
  • Flexアイテム5
  • Flexアイテム6
  • Flexアイテム7
  • Flexアイテム8
  • Flexアイテム9

align-content:space-between;

flexアイテムの一行目と最終行をflexコンテナに対して上下に余白を空けずに配置し、それ以外のアイテム行を均等配置します。

.container{
  align-content:space-between;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3
  • Flexアイテム4
  • Flexアイテム5
  • Flexアイテム6
  • Flexアイテム7
  • Flexアイテム8
  • Flexアイテム9

align-content:space-around;

flexアイテムの行をflexコンテナに対して均等配置します。

.container{
  align-content:space-around;
}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3
  • Flexアイテム4
  • Flexアイテム5
  • Flexアイテム6
  • Flexアイテム7
  • Flexアイテム8
  • Flexアイテム9

以上が、flexコンテナ(親要素)に使用できるプロパティです。多くの場合、上記のプロパティだけでも事足りるのですが、さらに細かい設定を行いたい場合には、flexアイテム(子要素)にもプロパティが設定できます。続いては、flexアイテムに設定できるプロパティもご紹介します。

flexアイテムに使用できるプロパティ

子要素であるflexアイテムにもコンテナ同様プロパティが用意されています。使用できるプロパティは以下の通りです。

  • order
    ・Flexアイテムの並び順を設定する。
  • flex-grow
    ・Flexアイテムの伸びる比率を設定する。
  • flex-shrink
    ・Flexアイテムの縮む比率を設定する。
  • flex-basis
    ・Flexアイテムのベースとなる幅を設定する。
  • flex
    ・flex-grow、flex-shrink、flex-basisを一括で設定する。
  • align-self
    ・Flexアイテムの垂直方向(縦)の位置揃えを設定する。

order

orderプロパティは、Flexアイテムそれぞれの順序を変更するプロパティです。アイテムそれぞれに表示する順番をつけていきます。

HTML

<ul class="container">
  <li class="item1">flexアイテム1</li>
  <li class="item2">flexアイテム2</li>
  <li class="item3">flexアイテム3</li>
</ul>

CSS

.item1{order:1;}
.item2{order:3;}
.item3{order:2;}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

flex-grow

flex-growプロパティは、Flexコンテナの余白に対して、Flexアイテムそれぞれの伸び率を変更するプロパティです。アイテムによって幅を変えたい際に使用します。このプロパティは0がデフォルト値で、大きな数値を設定するほどより大きく伸びます。マイナス値は設定できません。

HTML

<ul class="container">
  <li class="item1">flexアイテム1</li>
  <li class="item2">flexアイテム2</li>
  <li class="item3">flexアイテム3</li>
</ul>

CSS

.item1{flex-grow:1;}
.item2{flex-grow:3;}
.item3{flex-grow:2;}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

flex-shrink

flex-shrinkプロパティは、Flexコンテナの余白に対して、Flexアイテムそれぞれの縮み率を変更するプロパティです。コンテナに対してアイテムが入りきらない際に使用します。このプロパティは1がデフォルト値で、大きな数値を設定するほどより小さく縮みます。マイナス値は設定できません。

CSS

.item1{flex-shrink:1;}
.item2{width:100%;flex-shrink:3;}
.item3{width:100%;flex-shrink:1.5;}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

flex-basis

flex-basisプロパティは、Flexアイテムそれぞれの幅を指定するプロパティです。widthと同じように幅を設定できるのですが、微妙に違いますので後程そちらも説明したいと思います。このプロパティはautoがデフォルト値です。

CSS

.item1{flex-basis:auto;}
.item2{flex-basis:50%;}
.item3{flex-basis:60px;}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

flex

flexプロパティは、flex-grow、flex-shrink、flex-basisを一括指定するプロパティです。それぞれの値を順番に記述していきます。

CSS

.item1{flex:0 1 50%;}
.item2{flex:2 1 auto;}
.item3{flex:0 1 60px;}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

align-self

align-selfプロパティは、flexアイテムの垂直方向(縦)の位置揃えを設定するプロパティです。このalign-selfプロパティはflexコンテナに指定する「align-items」プロパティと同じ効果を持ちます。違いとしては、flexアイテムそれぞれに指定ができるということと、align-selfプロパティの方がalign-itemsプロパティに比べて優先順位が高いということです。

align-selfに指定できる値

内容
auto flexコンテナのalign-itemsの値を使用する(デフォルト値)
flex-start flexアイテムを上揃えで配置する
flex-end flexアイテムを下揃えで配置する
center flexアイテムを上下中央揃えで配置する
stretch flexアイテムの上下の余白を埋め、高さを揃える
baseline flexアイテムをベースラインに合わせて配置する

CSS

.item1{align-self:flex-end;}
.item2{align-self:flex-start;}
.item3{align-self:flex-center;}
  • Flexアイテム1
  • Flexアイテム2
  • Flexアイテム3

補足:flex-basisとwidthの違いとは?

flex-basisとwidthは、どちらも要素の幅を指定するプロパティです。一見、同じように思えるのですが、微妙に違いがあります。flex-basisを使うかwidthを使うかで迷うこともあるかと思いますので、違いを理解しておくとよいでしょう。

理解する上でのポイントは以下の3点です。

  • ・flex-basisは幅だけでなく高さにもなる
  • ・flexプロパティのショートハンドに対応
  • ・優先順位はflex-basisが高い

まず1つ目は、flex-basisは、要素が横並びの時は「幅」を指定しますが、縦並びの際は「高さ」を指定するプロパティになるということです。つまり、レスポンシブサイトで横並びから縦並びに切り替えようとした際に、幅や高さの値を上書きしなくても「row」「column」の切り替えだけで済むようにできるというわけです。

次に2つ目ですが、flexプロパティは、flex-grow、flex-shrink、flex-basisを一括指定できるショートハンドですが、これにはwidthやheightは対応していませんので、コードの視認性を高めるのに役立ちます。

最後に3つ目は、flex-basisはwidthやheightより優先順位が高いということです。1つ目のポイントでも説明した通り、一定の条件のみでflex-basisを適用したい際に役立ちます。

Flexboxを使う際の注意点

ブラウザによって対応していない場合がある

flexboxは、ブラウザによって対応状況が異なります。とは言え、ほとんどの主要なブラウザの最新版では対応しており、そこまで気にしなくてもきれいなレイアウトを組むことができます。しかし、IEのバージョン6-9には非対応だったり(もはや驚かないですね)ベンダープレフィックスが必要だったりするので多少注意が必要です。どうしても古いバージョンに対応しなければならない場合は、対応状況を確認しましょう。

https://caniuse.com/#search=flex

まとめ

いかがでしたか?
flexboxは、非常に便利で簡単にレイアウトを組むことができます。
ただ、初心者の方や長年floatに慣れていた方には少しとっつきにくいところがあるかもしれませんね。
それでも、慣れてしまえばfloatのように「あれ?なんでこれ効かないの?」といったことも大幅に減って、コーディングにかける時間もかなり節約できると思います。
ぜひ、参考にしてみてください。

LINEで送る
Pocket