Flexboxの使い方、徹底解説します！
レスポンシブサイトが主流となってから、Flexboxが使われているサイトが増えてきました。
カラム数を増やすときはもちろん、イメージ画像を横並びにしたいときなど、様々な場面で役立つFlexbox。
今回はこのFlexboxの基本の使い方と、
あまり知られていないけど、便利な使い方を紹介いたします！
1、Flexboxのブラウザ対応
便利なFlexboxですが、ブラウザの対応はどうなのでしょう？
2017年９月現在の結果ですが、ほぼ全てのブラウザで使用することができますね！
この結果を見てもらえれば、Flexboxを使用することへの抵抗はなくなるかと思います。
それでは具体的にどのように使えるかを紹介していきます。
2、Flexboxを使用するのに必要な要素
Flexboxを使用する際は、横並びにしたい要素と、それを囲う要素が必要です。
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
上記を例にすると、
「flexbox」が囲う要素です。
これのことを「Flexboxコンテナー」と呼びます。
Flexboxの中身にあたるpタグを「Flexboxアイテム」と呼びます。
この要素に関しては、Flexboxを使用するにあたり、何か指定することはありません。
3、要素を横並びにする
Flexboxの基本ですね。
今回は３つの要素を横並びにします。
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 |
.flexbox01{ display: flex; } |
【結果】
サンプル01
サンプル02
サンプル03
このように１行の指定だけで要素を横並びにすることができます。
flexの指定だとブロック要素になりますが、インライン要素にしたい場合は、
【CSS】
|
1 2 3 |
.flexbox{ display: inline-flex; } |
上記のように指定します。
4、要素の並び方を変更する
横並びが簡単にできるFlexboxですが、「flex-direction」の指定をすることで、
並びの方向を変更することも可能です。
4-1、通常の横並び
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 |
.flexbox4_1{ display: flex; flex-direction: row; } |
【結果】
サンプル01
サンプル02
サンプル03
4-2、要素の後ろから横並び
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 |
.flexbox4-2{ display: flex; flex-direction: row-reverse; } |
【結果】
サンプル01
サンプル02
サンプル03
4-3、縦並び
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 |
.flexbox4_3{ display: flex; flex-direction: column; } |
【結果】
サンプル01
サンプル02
サンプル03
4-4、要素の後ろから縦並び
この指定は、HTMLに書いた要素を逆順で表示することができます。
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 |
.flexbox4_4{ display: flex; flex-direction: column-reverse; } |
【結果】
サンプル01
サンプル02
サンプル03
5、Flexboxアイテムを水平方向に揃える
flex-directionで要素の並びを指定したものを元にして、
水平方向の揃え方を指定できます。
まずは横並びにしたときの例を紹介します。
基本の指定
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 |
.flexbox5{ display: flex; flex-direction: row; } |
5-1、【横並び】の場合の左揃え
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 |
.flexbox5_1{ display: flex; flex-direction: row; justify-content: flex-start; } |
【結果】
サンプル01
サンプル02
サンプル03
5-2、【横並び】の場合の右揃え
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 |
.flexbox5_2{ display: flex; flex-direction: row; justify-content: flex-end; } |
【結果】
サンプル01
サンプル02
サンプル03
次に縦並びにした時の例を紹介します。
基本の指定
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 |
.flexbox5{ display: flex; flex-direction: column; } |
5-3、【縦並び】の場合の上揃え
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 6 |
.flexbox5_3{ display: flex; flex-direction: column; justify-content: flex-start; height: 200px; } |
【結果】
サンプル01
サンプル02
サンプル03
5-4、【縦並び】の場合の下揃え
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 6 |
.flexbox5_4{ display: flex; flex-direction: column; justify-content: flex-end; height: 200px; } |
【結果】
サンプル01
サンプル02
サンプル03
次に横並びと縦並びで共通して同じ動きをする設定を紹介します。
今回は例を横並びとします。
基本の指定
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 |
.flexbox5{ display: flex; flex-direction: row; } |
5-5、中央揃え
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 |
.flexbox{ display: flex; flex-direction: row; justify-content: center; } |
【結果】
サンプル01
サンプル02
サンプル03
5-6、要素の間隔を均等に開ける
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 |
.flexbox5_6{ display: flex; flex-direction: row; justify-content: space-between; } |
【結果】
サンプル01
サンプル02
サンプル03
5-7、要素の間隔を均等に開ける その２
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 |
.flexbox5_7{ display: flex; flex-direction: row; justify-content: space-around; } |
【結果】
サンプル01
サンプル02
サンプル03
space-betweenとspace-aroundの違いは、space-aroundを使用すると始めと終わりの要素の左右にも間隔が開くところです。
6、Flexboxアイテムを垂直方向に揃える
align-itemsという指定を使用するのですが、この場合、揃える軸は「justify-content」の垂直方向の軸になります。
「justify-content」と一緒に使用することで「水平垂直中央揃え」を簡単に指定することができます！
まずは、横並びの例を紹介します。
基本の指定
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 |
.flexbox6{ display: flex; flex-direction: row; } |
6-1、【横並び】の場合の上揃え
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 |
.flexbox6_1{ display: flex; flex-direction: row; align-items: flex-start; } |
【結果】※上揃えがわかりやすいように、pタグにそれぞれ違う高さを指定しています
サンプル01
サンプル02
サンプル03
6-2、【横並び】の場合の下揃え
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 |
.flexbox6_2{ display: flex; flex-direction: row; align-items: flex-end; } |
【結果】※下揃えがわかりやすいように、pタグにそれぞれ違う高さを指定しています
サンプル01
サンプル02
サンプル03
次に縦並びにした時の例を紹介します。
基本の指定
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 |
.flexbox6{ display: flex; flex-direction: column; } |
6-3、【縦並び】の場合の左揃え
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 |
.flexbox6_3{ display: flex; flex-direction: column; align-items: flex-start; } |
【結果】
サンプル01
サンプル02
サンプル03
6-4、【縦並び】の場合の右揃え
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 |
.flexbox6_4{ display: flex; flex-direction: column; align-items: flex-end; } |
【結果】
サンプル01
サンプル02
サンプル03
次に横並びと縦並びで共通して同じ動きをする設定を紹介します。
今回は例を横並びとします。
基本の指定
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 |
.flexbox6{ display: flex; flex-direction: row; } |
6-5、中央揃え
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 |
.flexbox6_5{ display: flex; flex-direction: row; align-items: center; } |
【結果】※中央揃えがわかりやすいように、pタグにそれぞれ違う高さを指定しています
サンプル01
サンプル02
サンプル03
6-6、ベースラインを揃える
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 |
.flexbox6_6{ display: flex; flex-direction: row; align-items: baseline; } |
【結果】※中央揃えがわかりやすいように、pタグにそれぞれ違う高さを指定しています
サンプル01
サンプル02
サンプル03
6-7、要素を上下いっぱいに広げる
この指定の場合、Flexアイテムに高さが指定されていれば、上下いっぱいに広がります。
指定されていない場合は、コンテンツ量が一番多いFlexアイテムに合わせて広がります。
【HTML】
|
1 2 3 4 5 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 6 |
.flexbox6_7{ display: flex; flex-direction: row; align-items: stretch; width: 100px; } |
【結果】
サンプル01
サンプル02
サンプル03
7、Flexアイテムの折り返し
Flexboxは１行、または複数行にアイテムを並べることができます。
１行の場合は、アイテムがある限り、親要素からはみ出しても横並びに並びます。
複数行の場合は、アイテムが親要素からはみ出してしまう場合は、はみ出さずに折り返して表示をします。
7-1、折り返しなしの１行表示
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 |
.flexbox7_1{ display: flex; flex-wrap: nowrap; } |
【結果】
サンプル01
サンプル02
サンプル03
サンプル04
サンプル05
サンプル06
サンプル07
サンプル08
サンプル09
7-2、複数行で表示する
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 |
.flexbox7_2{ display: flex; flex-wrap: wrap; } |
【結果】
サンプル01
サンプル02
サンプル03
サンプル04
サンプル05
サンプル06
サンプル07
サンプル08
サンプル09
7-3、複数行表示で、アイテムを逆から表示する
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 |
.flexbox7_3{ display: flex; flex-wrap: wrap-reverse; } |
【結果】
サンプル01
サンプル02
サンプル03
サンプル04
サンプル05
サンプル06
サンプル07
サンプル08
サンプル09
8、「flex-direction」と「flex-wrap」を一度に指定する
「flex-flow」という指定を使用すれば、「flex-direction」と「flex-wrap」を一緒に指定することができます。
アイテムを複数行で横並び表示したい場合は以下のように指定をします。
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 |
.flexbox8{ display: flex; flex-flow : row wrap; } |
【結果】
サンプル01
サンプル02
サンプル03
サンプル04
サンプル05
サンプル06
サンプル07
サンプル08
サンプル09
9、行を揃える
7で紹介したflex-wrapをnowrap以外に指定した時に使える、複数行になったときの揃え方です。
まずは、横並びの例を紹介します。
基本の指定
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 5 |
.flexbox9{ display: flex; flex-direction: row; flex-wrap: wrap; } |
9-1、【横並び】の場合の上揃え
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 5 6 7 |
.flexbox9_1{ display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; height: 200px; } |
【結果】
サンプル01
サンプル02
サンプル03
サンプル04
サンプル05
サンプル06
サンプル07
サンプル08
サンプル09
9-2、【横並び】の場合の下揃え
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 5 6 7 |
.flexbox9_2{ display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-end; height: 200px; } |
【結果】
サンプル01
サンプル02
サンプル03
サンプル04
サンプル05
サンプル06
サンプル07
サンプル08
サンプル09
次に縦並びにした時の例を紹介します。
基本の指定
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 5 |
.flexbox9{ display: flex; flex-direction: column; flex-wrap: wrap; } |
9-3、【縦並び】の場合の左揃え
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 5 6 7 |
.flexbox9_3{ display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; height: 200px; } |
【結果】
サンプル01
サンプル02
サンプル03
サンプル04
サンプル05
サンプル06
サンプル07
サンプル08
サンプル09
9-4、【縦並び】の場合の右揃え
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 5 6 7 |
.flexbox9_4{ display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-end; height: 200px; } |
【結果】
サンプル01
サンプル02
サンプル03
サンプル01
サンプル02
サンプル03
サンプル01
サンプル02
サンプル03
次に横並びと縦並びで共通して同じ動きをする設定を紹介します。
今回は例を横並びとします。
基本の指定
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 5 |
.flexbox9{ display: flex; flex-direction: row; flex-wrap: wrap; } |
9-5、中央揃え
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 5 6 7 |
.flexbox9_5{ display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; height: 200px; } |
【結果】
サンプル01
サンプル02
サンプル03
サンプル04
サンプル05
サンプル06
サンプル07
サンプル08
サンプル09
9-6、要素の間隔を均等に開ける
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 5 6 7 |
.flexbox9_6{ display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; height: 200px; } |
【結果】
サンプル01
サンプル02
サンプル03
サンプル04
サンプル05
サンプル06
サンプル07
サンプル08
サンプル09
9-7、要素の間隔を均等に開ける その２
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 |
サンプル01 サンプル02 サンプル03 サンプル04 サンプル05 サンプル06 サンプル07 サンプル08 サンプル09 |
【CSS】
|
1 2 3 4 5 6 7 |
.flexbox9_7{ display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; height: 200px; } |
【結果】
サンプル01
サンプル02
サンプル03
サンプル04
サンプル05
サンプル06
サンプル07
サンプル08
サンプル09
「justify-content」の指定と一緒で、space-betweenとspace-aroundの違いは、
space-aroundを使用すると始めと終わりの要素の左右にも間隔が開くところです。
10、２カラムのサイトでFlexboxを使用する
２カラムのサイトのように、ボックスを横並びにしたサイトでもFlexboxは役にたちます。
flexは、Flexboxアイテムの伸縮性を指定するために使用します。
10-1、２カラムで片方のボックスの大きさを固定にしたい場合
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 6 7 8 9 10 11 |
.flexbox10{ display: flex; } .flexbox10 ul{ width: 200px; } .flexbox10 div{ flex: 1; } |
【結果】
- サイトバー1
- サイトバー2
- サイトバー3
サンプル01
サンプル02
サンプル03
２カラムでFlexboxを使用する場合は、サイドバーなど片側のボックスをサイズ指定することで、バランスの良いサイズに整えることができます。
10-2、２カラムで片方のボックスを大きくしたい場合
２カラムで片方のボックスを大きく表示し、なおかつ両方のボックスを固定値にしたくない場合は、以下のような設定にします。
【HTML】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
サンプル01 サンプル02 サンプル03 |
【CSS】
|
1 2 3 4 5 6 7 8 9 10 11 |
.flexbox10_2{ display: flex; } .flexbox10_2 ul{ flex: 1; } .flexbox10_2 div{ flex: 2; } |
【結果】
- サイトバー1
- サイトバー2
- サイトバー3
サンプル01
サンプル02
サンプル03
小さく表示したい側のボックスのflexの値を１、大きく表示したい側のボックスのflexの値を2にすることで、
画面全体のサイズを１：２にしたサイズでボックスを表示することができます。
まとめ
Flexboxはfloatに代わる新しい便利なプロパティとして注目を浴びています。
古いIEでは対応していないなど、難点もありますが、これからの制作で必ず役立ち、発展していくプロパティですので、ぜひ使いこなせるようになりましょう！
執筆者
DTPデザイナー、雑貨屋さんのスタッフ、一般事務… 散々やりたいことをやり散らかして、WEBデザイナーに落ち着きました。ものを作っている時間が好き。
うさぎと音楽が好きすぎて、うさぎと音楽を無理やりこじつけたお洋服を作ったり、イベント企画をしたりもしています。
この記事を読んだ人はこんな記事も読んでいます
CHANGEUP!では、エンジニアの転職、
フリーランスの案件紹介を行なっています。
将来の働き方で迷っている方、転職をお考えの方、あなたのエンジニアとしての力を最大限発揮できる場所を提案させていただきます。
サービス紹介
よくある質問
