数年前からいつからflexboxを制作に取り入れようか悩んでいましたが、もう使っても大丈夫でしょう!flexbox!
ということで今回はflexboxの使い方を紹介していきます。

以下の本の内容を参考に説明していこうと思います。
flexbox以外にも参考にするべきことが多く書いてある著書です。初心者から中級者の方にオススメの一冊です。

flexbox対応ブラウザ
flexbox対応ブラウザ表

CSS Flexible Box Layout Module


flexboxは親要素に適用するcssプロパティと、子要素に適用するcssプロパティがこんがらがってきますので、最初に親要素・子要素に適用するプロパティを分けます。
ここからは親要素を「コンテナ」、子要素を「アイテム」と表記していきます。

コンテナプロパティ
アイテムプロパティ

コンテナプロパティ

まず初めにコンテナに指定できるプロパティから紹介していきます。
コンテナプロパティの説明では、下記のhtmlを用いて説明していきます。



A
Bdescription
C

display:flex

display:flexを適用させないと、下記のように表示されます。

flex適用前
fg1. flex適用前

単純にdisplay:flexを適用すると、下記のように表示されます。

flex適用後
fg2. flex適用後

flex-direction

flex-directionはアイテムを並べる方向を決めるプロパティです。初期値の「row」場合はfg2のようになります。
「row」以外の場合を見ていきましょう。

プロパティの値

  • row (初期値)
  • row-reverse
  • column
  • column-reverse
flex-direction「row-reverse」右から順に横並び
fg3. flex-direction「row-reverse」右から順に横並び
flex-direction「column」縦並び
fg4. flex-direction「column」縦並び
flex-direction「column-reverse」下から順に縦並び
fg5. flex-direction「column-reverse」下から順に縦並び

flex-wrap

flex-wrapはアイテムがコンテナをはみ出した時に折り返し方をを決めるプロパティです。

プロパティの値

  • nowrap (初期値)
  • wrap
  • wrap-reverse
flex-wrap「nowrap」折り返さない
fg6. flex-wrap「nowrap」折り返さない
flex-wrap「wrap」折り返す
fg7. flex-wrap「wrap」折り返す
flex-wrap「wrap-reverse」上に折り返す
fg8. flex-wrap「wrap-reverse」上に折り返す

flex-flow

flex-flowはflex-directionflex-wrapを一括で指定できるプロパティです。
下記のように書くことができます。


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


justify-content

justify-contentはアイテムの横方向の揃え方を決めるプロパティです。初期値の「flex-start」場合はfg2のようになります。
「flex-start」以外の場合を見ていきましょう。

プロパティの値

  • flex-start (初期値)
  • flex-end
  • center
  • space-between
  • space-around
justify-content「flex-end」右揃え
fg9. justify-content「flex-end」右揃え
justify-content「center」中央揃え
fg10. justify-content「center」中央揃え
justify-content「space-between」両端揃え
fg11. justify-content「space-between」両端揃え
justify-content「space-around」余白の均等割
fg12. justify-content「space-around」余白の均等割

※fg12.の「space-around」は両端の余白のみ半分のサイズになります。


align-items

align-itemsはアイテムの縦方向の揃え方を決めるプロパティです。初期値の「stretch」場合はfg2のように横並びのアイテムの高さを揃えてくれます。
アイテム個別ごとに縦方向の揃え方を決めるプロパティalign-selfもあります。
「stretch」以外の場合を見ていきましょう。

プロパティの値

  • stretch (初期値)
  • flex-start
  • flex-end
  • center
  • baseline
align-items「flex-start」上揃え
fg13. align-items「flex-start」上揃え
align-items「flex-end」下揃え
fg14. align-items「flex-end」下揃え
align-items「center」中央揃え
fg15. align-items「center」中央揃え
align-items「baseline」文字のベースライン揃え
fg16. align-items「baseline」文字のベースライン揃え

align-content

align-contentは複数行のときのアイテムの位置揃えを決めるプロパティです。
今回は下記のコードで説明していきます。



A
B
C
D
E

プロパティの値

  • stretch (初期値)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
align-content「stretch」コンテナの高さ揃え
fg17. align-content「stretch」コンテナの高さ揃え
align-content「flex-start」上揃え
fg18. align-content「flex-start」上揃え
align-content「flex-end」下揃え
fg19. align-content「flex-end」下揃え
align-content「center」中央揃え
fg20. align-content「center」中央揃え
align-content「space-between」上下両端揃え
fg21. align-content「space-between」上下両端揃え
align-content「space-around」余白の均等割
fg22. align-content「space-around」余白の均等割

※fg17.の「stretch」を指定してもアイテムに高さを指定いる場合は、指定した高さが優先になります。
※fg22.の「space-around」は上下両端の余白のみ半分のサイズになります。



アイテムプロパティ

次にアイテムに指定できるプロパティから見ていきます。
アイテムプロパティの説明では、下記のhtmlを用いて説明していきます。



A
B
C

flex-basis

flex-basisはアイテムのベースサイズを指定します。
ベースサイズは
flex-directionが「row」「row-reverse」の時はアイテムの横幅
flex-directionが「column」「column-reverse」の時は、アイテムの縦幅になります。
アイテムにwidthやheightを指定しても、flex-basisが優先して適用されます。ただし、max-widthやmin-widthなどは適用されます。
初期値の「auto」場合はfg2のようになり、この時はwidthやheightの指定は有効になります。

プロパティの値(pxや%で指定)

  • auto (初期値)

下記のように指定すると、fg23のようになります。


.item-A{
 flex-basis: 50px;
}
.item-B{
 flex-basis: 100px;
}
.item-C{
 flex-basis: 150px;
}

flex-basisをpx指定
fg23. flex-basisをpx指定

flex-grow

flex-growはコンテナに余白ができたときに、余白をどのように埋めるかを決定するプロパティです。初期値(0)の場合はfg23のようになります。

プロパティの値(数値で指定)

  • 0 (初期値)

全てのアイテムにflex-grow:1を指定すると、下記のようになります。


.item-A{
 flex-basis: 50px;
 flex-grow: 1;
}
.item-B{
 flex-basis: 100px;
 flex-grow: 1;
}
.item-C{
 flex-basis: 150px;
 flex-grow: 1;
}

flex-grow「1」
fg24. flex-grow「1」

これは余白の300pxを A:B:C=1:1:1 の比率で分け合ったのです。だからそれぞれのアイテムの幅が「ベースサイズ+100px」になっているのです。

例えば下記のようすると、全てのアイテムが同じ幅になります。


.item-A{
 flex-basis: 50px;
 flex-grow: 3;
}
.item-B{
 flex-basis: 100px;
 flex-grow: 2;
}
.item-C{
 flex-basis: 150px;
 flex-grow: 1;
}

flex-grow 使用例1
fg25. flex-grow 使用例1

これは余白の300pxを A:B:C=3:2:1 の比率で分け合っていますので、
A = 300px/6*3 = 150px
B = 300px/6*2 = 100px
C = 300px/6*1 = 50px
それぞれの値がアイテムの幅に足されています。


flex-shrink

flex-shrinkはアイテムがコンテナをはみ出した時に、どんな割合で縮小して、コンテナに収まるかを決めるプロパティです。

プロパティの値(数値で指定)

  • 1(初期値)

下記のような場合、初期値のflex-shrink:1の時はfg26のようになります。


.flex-container{
 display: flex;
 width: 210px;
}
.item-A{
 flex-basis: 50px;
}
.item-B{
 flex-basis: 100px;
}
.item-C{
 flex-basis: 150px;
}

flex-shrink:1
fg26. flex-shrink:1

これは下記の計算でfg26.のような結果になっています。

縮小の比率
Aの縮小比:Bの縮小比:Cの縮小比
= (Aのflex-basis)*(Aのflex-shrink):(Bのflex-basis)*(Bのflex-shrink):(Cのflex-basis)*(Cのflex-shrink)
= 50*1:100*1:150*1
= 1:2:3

縮小幅
Aの縮小幅= 90px/6*1 = 15px
Bの縮小幅= 90px/6*2 = 30px
Cの縮小幅= 90px/6*3 = 45px

アイテムの幅
Aの幅 = 50px - 15px = 35px
Bの幅 = 100px - 30px = 70px
Cの幅 = 150px - 45px = 105px

flex-growの時はアイテムのflex-basisは関係しなかったのですが、flex-shrinhは関係してくるので、計算が少しややこしいです。

下記のようにflex-shrinkを指定したときにどうなるか見てみましょう。


.flex-container{
 display: flex;
 width: 210px;
}
.item-A{
 flex-basis: 50px;
 flex-shrink: 0;
}
.item-B{
 flex-basis: 100px;
 flex-shrink: 3;
}
.item-C{
 flex-basis: 150px;
 flex-shrink: 4;
}

flex-shrink 使用例1
fg27. flex-shrink 使用例1

これも一から計算して確認してみます。

縮小の比率
Aの縮小比:Bの縮小比:Cの縮小比
= 50*0:100*3:150*4
= 0:1:2

縮小幅
Aの縮小幅= 90px/3*0 = 0px
Bの縮小幅= 90px/3*1 = 30px
Cの縮小幅= 90px/3*2 = 60px

アイテムの幅
Aの幅 = 50px - 0 = 50px
Bの幅 = 100px - 30px = 70px
Cの幅 = 150px - 60px = 90px


flex

flexプロパティはこれまで説明してきた、「flex-grow」「flex-shrink」「flex-basis」を下記のように一括で指定できます。


.flex-item{
 flex: 【flex-grow】 【flex-shrink】 【flex-basis】;
}


order

orderプロパティはアイテムの並び順を変更することができます。

プロパティの値(数値で指定)

  • 0(初期値)

下記のように指定すると、fg28のようになります。



A
B
C
D
E
order 使用例1
fg28. order 使用例1

align-self

align-itemsとプロパティの値や挙動は同じです。

align-itemsはコンテナのプロパティに対して、align-selfはアイテムのプロパティです。
アイテム個別で縦方向の揃え方を変えたい場合に使用します。