INSPIRATION

まだfloat使ってる?CSSのFlexboxを徹底解説!

目次

  1. flexboxとは
  2. flexboxの基本的な使い方
  3. flexboxコンテナで指定できるプロパティ
    1. flex-direction:flexアイテムの並び順
    2. flex-wrap:flexアイテムの折り返し
    3. flex-flow:flex-directionとflex-wrapをまとめて指定
    4. justify-content:水平方向の位置
    5. align-items:垂直方向の位置
    6. align-content:複数行の位置
  4. flexboxアイテムで指定できるプロパティ
    1. order:並び順
    2. flex-grow:伸び率
    3. flex-shrink:縮み率
    4. flex-basis:ベースの幅
    5. flex:flexアイテムの幅をまとめて指定
    6. align-self:垂直方向の位置

 

flexboxとは

flexboxとは「Flexible Box Layout Module」のことで、CSSでのレイアウト設定を簡単にするレイアウトモジュールです。今までjavascript・jQueryで行っていたような複雑なレイアウトもとてもシンプルに設定できます。数年前まではflexboxをサポートしていないブラウザが多く使いづらかったのですが、現在(2018年5月現在)ではほとんどのブラウザにサポートされています。
 

flexboxの基本的な使い方

それでは基本的な使い方からやっていきましょう。まず抑えるポイントは2つ。
 

flexコンテナー

flexコンテナーは下記に記載するflexアイテムを内包する親要素です。flexアイテムの縦・横軸の位置や並び順、折り返しなどを簡単に指定できます。
 

flexアイテム

flexアイテムはflexコンテナー内に配置された子要素です。親要素がflexコンテナーであれば自動でflexアイテムとして扱われます。
 

ではリスト要素をflexboxで横並びにしたいと思います。

<ul class="box flexbox">
    <li class="flexbox__item">リストアイテム1</li>
    <li class="flexbox__item">リストアイテム2</li>
    <li class="flexbox__item">リストアイテム3</li>
    <li class="flexbox__item">リストアイテム4</li>
</ul>

 

flexコンテナー指定なし

  • リストアイテム1
  • リストアイテム2
  • リストアイテム3
  • リストアイテム4

通常のリストです。
 

flexコンテナー指定

.flexbox{
    display: flex;
}

「.flexbox」にたった1行「display: flex;」を指定しました。すると・・・

  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4

これだけで横並びのリストになります。超簡単!!
 

flexboxコンテナで指定できるプロパティ

次に親要素であるflexboxコンテナで指定できるプロパティを1つずつ見ていきましょう。
 

flex-direction:flexアイテムの並び順

flex-direction:row(デフォルト)

.flexbox{
    display: flex;
    flex-direction: row;
}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4

「row」はデフォルトなので指定の必要はありません。左から右にflexアイテムが並んでいきます。
 

flex-direction:row-reverse

.flexbox{
    display: flex;
    flex-direction: row-reverse;
}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4

「row」とは逆に右から左にflexアイテムが並んでいきます。要素の基準の位置も右になっています。
 

flex-direction:column

.flexbox{
    display: flex;
    flex-direction: column;
}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4

「display: flex;」を指定しなかったときのように通常通り上から下にflexアイテムが並びます。
 

flex-direction:column-reverse

.flexbox{
    display: flex;
    flex-direction: column-reverse;
}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4

並び方は縦ですが先とは逆に下から上にflexアイテムが並びます。
 

flex-wrap:flexアイテムの折り返し

flex-wrap: nowrap(デフォルト)

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

「nowrap」はデフォルトなので指定の必要はありません。「nowrap」ではflexアイテムを折り返さず、自動で幅を調整して横並びを維持します。
 

flex-wrap: wrap

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

「wrap」では「float:left」としたときのようにflexアイテムがflexコンテナーの幅を超える場合は折り返します。
 

flex-wrap: wrap-reverse

.flexbox{
    display: flex;
    flex-wrap: wrap-reverse;
}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4
  • flexアイテム5
  • flexアイテム6
  • flexアイテム7
  • flexアイテム8

「wrap-reverse」では折り返す方向が下から上になります。
 

flex-flow:flex-directionとflex-wrapをまとめて指定

「flex-flow」は「flex-direction」、「flex-wrap」をまとめて指定できるショートハンドです。デフォルトはそれぞれのデフォルトの値の「flex-flow:row nowrap;」です。

.flexbox{flex-flow:row nowrap;}

 

justify-content:水平方向の位置

justify-content: flex-start(デフォルト)

.flexbox{
    display: flex;
    justify-content: flex-start;
}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4

「flex-start」はデフォルトなので指定の必要はありません。左詰めで並びます。
 

justify-content: flex-end

.flexbox{
    display: flex;
    justify-content: flex-end;
}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4

「flex-end」ではflexアイテムが右詰めで並びます。前述の「flex-direction: row-reverse;」と似ていますが、こちらは並び順は左から右に維持したまま右詰めになります。
 

justify-content: center

.flexbox{
    display: flex;
    justify-content: center;
}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4

「center」ではflexアイテムが中央揃えで並びます。「flex-center」ではないので注意。
 

justify-content: space-between

.flexbox{
    display: flex;
    justify-content: space-between;
}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3

「space-between」ではflexアイテムが均等感覚で並びます。
 

justify-content: space-around

.flexbox{
    display: flex;
    justify-content: space-around;
}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3

「space-around」は「space-between」と似ていますが、こちらは左右の端の余白も含めて均等に配置されます。
 

align-items:垂直方向の位置

「align-items」ではflexコンテナーの垂直方向に余白があった場合のflexアイテムの垂直の位置を指定できます。私的には一番これがありがたい機能です。

align-items: stretch(デフォルト)

.flexbox{
    display: flex;
    align-items: stretch;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「stretch」はデフォルトなので指定の必要はありません。flexアイテムはflexコンテナーの高さいっぱいに伸びます。これがとても便利!「float:left」だけだと下のようになります。
 

「float:left」

  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

このバラバラな高さを合わせるのが「display:table-cell」でやったり、jsで高さ取得してやったり・・・。結構面倒だったんですよね。flexコンテナーなら自動で合わせてくれます。とてもありがたいですね。
 

align-items: flex-start

.flexbox{
    display: flex;
    align-items: flex-start;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「flex-start」ではflexアイテムの高さはそのままで伸びません。先ほどの「float:left」の場合と同じ表示になります。
 

align-items: flex-end

.flexbox{
    display: flex;
    align-items: flex-end;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「flex-end」では垂直方向の下揃えになります。
 

align-content:複数行の位置

「align-content」では複数行になった場合の行の位置を指定します。

align-content: stretch

.flexbox{
    display: flex;
    align-content: stretch;
}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4
  • flexアイテム5
  • flexアイテム6
  • flexアイテム7
  • flexアイテム8

「stretch」はデフォルトなので指定の必要はありません。複数行になっても「align-items: stretch」のときと同じくそれぞれの行がflexコンテナーの高さに合わせて伸びます。
 

align-content: flex-start

.flexbox{
    display: flex;
    align-content: flex-start;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「flex-start」では高さはそのままで伸びません。ポイントは「align-items: flex-start」と違い、それぞれの行のflexアイテムは一番高い要素に揃えられている点です。
 

align-content: flex-end

.flexbox{
    display: flex;
    align-content: flex-end;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「flex-end」では行が下揃えになりました。
 

align-content: center

.flexbox{
    display: flex;
    align-content:center;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「center」では行が垂直中央揃えになりました。
 

align-content: space-between

.flexbox{
    display: flex;
    align-content: space-between;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「space-between」では行が垂直に均等感覚で並びます。
 

align-content: space-around

.flexbox{
    display: flex;
    align-content: space-around;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「space-around」は「space-between」と似ていますが、こちらは上下の余白も含めて均等に配置されます。
 

flexboxアイテムで指定できるプロパティ

次は子要素であるflexアイテムで指定できるプロパティを1つずつ見ていきましょう。flexコンテナーに「display:flex;」が指定されていないとCSSが効きませんのでご注意を!

order:並び順

flexアイテムの順序を個別に数値で指定できます。デフォルトは「0」です。

.flexbox__item1{order: 4;}
.flexbox__item2{order: 3;}
.flexbox__item3{order: 2;}
.flexbox__item4{order: 1;}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4

指定した順に並びます。
 

同じ数値にした場合はHTMLの記述した順に並びます。

.flexbox__item1{order: 4;}
.flexbox__item2{order: 4;}
.flexbox__item3{order: 4;}
.flexbox__item4{order: 4;}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4

 

flex-grow:伸び率

flexコンテナーの幅に余りがある場合にflexアイテムの伸び率を他のflexアイテムとの相対値(整数)で指定します。デフォルトは「0」です。

まずは指定なし

  • flexアイテム1
  • flexアイテム2
  • flexアイテム3

 

1つ目のflexアイテムにのみ指定

.flexbox__item1{flex-grow: 1;}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3

1つだけに指定する場合、1以上の数を指定してもこれ以上は伸びません。
 

3つのflexアイテムに指定

.flexbox__item1{flex-grow: 3;}
.flexbox__item2{flex-grow: 1;}
.flexbox__item3{flex-grow: 1;}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3

他のflexアイテムにも指定した場合は、それぞれの指定した数値の相対値で伸縮率が自動で計算されます。
 

flex-shrink:縮み率

flexアイテムの幅の合計がflexコンテナーの幅を超える場合、flexアイテムの縮む率を他のflexアイテムとの相対値(整数)で指定します。デフォルトは「1」です。flexコンテナーが「flex-wrap:nowap」の場合に有効です。

1つ目のflexアイテムに指定

.flexbox__item1{flex-shrink: 5;}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3
  • flexアイテム4
  • flexアイテム5
  • flexアイテム6

 

flex-basis:ベースの幅

flexアイテムのベースの幅を「width」のようにパーセントやピクセルで指定できます。デフォルトは「flex-basis:auto」です。ポイントはあくまでベースの幅であって必ずその幅になる訳ではありません。

全てに「flex-basis: 50%;」を指定

.flexbox__item1{flex-basis: 50%;}
.flexbox__item2{flex-basis: 50%;}
.flexbox__item3{flex-basis: 50%;}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3

合計が100%以上になるので、自動で幅が計算されています。
 

3つそれぞれに値を指定

.flexbox__item1{flex-basis: 200px;}
.flexbox__item2{flex-basis: 300px;}
.flexbox__item3{flex-basis: 400px;}
  • flexアイテム1
  • flexアイテム2
  • flexアイテム3

こちらも幅の合計がflexコンテナの幅を超えるのでベースの幅を元に自動で計算されています。
 

flex:flexアイテムの幅をまとめて指定(grow shrink basis)

「flex」は「flex:grow」、「flex: shrink」、「flex: basis」をまとめて指定できるショートハンドです。
デフォルトはそれぞれのデフォルトの値の「flex:0 1 auto;」です。

.flexbox__item1{flex:0 1 100px;}

 

align-self:垂直方向の位置

「align-items」と同じですが、こちらはflexアイテム個別に指定できます。

align-self:auto(デフォルト)

.flexbox__item1{
    align-self:auto;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「auto」はデフォルトなので指定の必要はありません。flexコンテナーの「align-items」の指定を受け継ぎます。
 

align-self:flex-start

.flexbox__item1{
    align-self:flex-start;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「flex-start」はflexコンテナーに「flex-end」が指定されていても、上に揃えます。
 

align-self:flex-end

.flexbox__item1{
    align-self:flex-end;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「flex-end」はflexコンテナーに「flex-start」が指定されていても、下に揃えます。
 

align-self:center

.flexbox__item1{
    align-self:center;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「center」はflexコンテナーの高さのセンターになります。
 

align-self:stretch

.flexbox__item1{
    align-self:stretch;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「stretch」はflexコンテナーに「flex-start」が指定されていても、flexコンテナーの高さいっぱいに伸びます。
 

align-self:baseline

.flexbox__item1{
    align-self:baseline;
}
  • コンテンツの
  • コンテンツの
    ボリュームが
  • コンテンツの
    ボリュームが
    違う時には
  • コンテンツの
    ボリュームが
    違う時には
    表示は
  • コンテンツの
    ボリュームが
    違う時には
    表示は
    どうなるか?

「baseline」はflexコンテナーに「flex-end」が指定されていても、上部のベースラインに揃えます。
 

まとめ

指定できるプロパティが多いのでかなり長い記事になってしまいましたが、flexboxの使いやすさが伝われば何よりです。今回はリスト要素のみでやりましたが、サイドバーとメインコンテンツの2カラムレイアウトや、横並びのグローバルナビゲーションなど、サイトのレイアウト全体にも当然使えます。そして使うとわかります。「なんて簡単なんだ!」と。
 

間違いなくレイアウトのスタンダードになるCSSなので、まだfloatでレイアウトしている方はぜひこの機械にflexboxでのレイアウトにチャレンジしてみてくださいね。

それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!
 

【WordPress】ショートコード作成の基本
NEXT INSPIRATION
ページ内リンクをページ外からでもスムーズにスクロールさせる
PREVIOUS INSPIRATION