ページの先頭へ
トップに戻る
2017年1月18日 Web制作

【CSS】Flexboxの各プロパティを挙動を確認してみる

floatpositionを使わずに要素の並び順や配置位置を柔軟に扱うことが出来るFlexboxですが、関連するプロパティが多くてあかまる(@Akamaru12mg)もまだまだ使いこなせていません…

というわけで、Flexboxの各プロパティの挙動を実際にデモを作って確認していきたいと思います。

FlexコンテナとFlexアイテムについて

Flexboxを扱う上で覚えておかなくてはいけないのが、FlexコンテナとFlexアイテムです。

Flexコンテナ

Flexboxを扱う上で必ず必要になるのがこのFlexコンテナです。次に説明するFlexアイテムを格納するための箱のようなもので、要素にdisplay:flex;を指定することで定義することが出来ます。

Flexアイテム

Flexコンテナの子要素は全てFlexアイテムとなり、これから紹介するFlex用のプロパティが適用できる状態になります。

これらを踏まえた上で、Flexbox用の各プロパティの使い方を見てみましょう。

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

flex-direction(子要素の配置方向)

Flexコンテナにflex-direction:○○を設定すると、子要素(Flexアイテム)の並び順を指定出来ます。

row(左から右:初期値)

1
2
3
4

column(上から下)

1
2
3
4

row-reverse(右から左)

1
2
3
4

column-reverse(下から上)

1
2
3
4

flex-wrap(子要素の折り返し)

FlexアイテムがFlexコンテナからはみ出した時の折り返しの方法を指定出来ます。

nowrap(折り返さない:初期値)

縮むんですね…
1
2
3
4
5
6

wrap(折り返す)

1
2
3
4
5
6

wrap-reverse(逆方向に折り返す)

1
2
3
4
5
6

justify-content(横方向の配置位置)

Flexアイテムの横方向の配置位置を指定出来ます。

flex-start(左に詰める:初期値)

1
2
3
4

flex-end(右に詰める)

1
2
3
4

center(中央に配置)

1
2
3
4

space-between(等間隔に配置)

1
2
3
4

space-around(等間隔+左右にも間隔を空けて配置)

1
2
3
4

align-content(縦方向の配置位置)

Flexアイテムの縦方向の配置位置を指定出来ます。

flex-start(上に詰める:初期値)

1
2
3
4
5
6

flex-end(下に詰める)

1
2
3
4
5
6

center(中央に配置)

1
2
3
4
5
6

space-between(等間隔に配置)

1
2
3
4
5
6
7
8
9

space-between(等間隔+上下にも間隔を空けて配置)

1
2
3
4
5
6
7
8
9

align-items(縦方向の揃えるライン)

Flexアイテムを並べるラインを指定出来ます。

flex-start(上揃え:初期値)

1
2
3
4
5
6

flex-end(下揃え)

1
2
3
4
5
6

center(中央揃え)

1
2
3
4
5
6

baseline(ベースライン揃え)

1
2
3
4
5
6

stretch(上下に伸縮)

1
2
3
4
5
6

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

flex-grow,flex-shrink(Flexアイテムの伸縮率)

ここはちょっと計算がめんどくさいです。

例えばFlexコンテナの幅に300px、Flexアイテムの幅に50pxを指定したとします。Flexアイテムの数が3つだとすると、150pxの余白が生まれますよね?その余白の分だけFlexアイテムを引き伸ばすことが出来るんですが、その際の伸びる倍率を指定するのがflex-growです。

flex-shrinkはその逆で、Flexコンテナからはみ出したFlexアイテムを縮める際の倍率となります。

flex-growの計算方法

まずはこちらのデモをご覧ください。
Flexコンテナの幅は300px、Flexアイテムの幅はwidth:50pxで、左から順にflex-grow:0 flex-grow:1flex-grow:2を指定しています。
1
2
3
余った150pxをflex-growの和(0+1+2=3)で割った数値(50px)が、それぞれのFlexアイテムのflex-growに応じて分配されます。
つまり左は50*0=0、真ん中は50*1=50px、右は50*2=100px伸びます。

flex-basis(Flexアイテムの幅)

基本的にwidthと同じ働きをするようですが、特に違いが分からなかったので省略します…詳しい人教えて…

order(Flexアイテムの順番指定)

order:○○に整数を指定すると、数値の低い順にFlexアイテムを並べることが可能です。
1
2
3
4
5
6

まとめ

指定できるプロパティが多くて難しそうですが、実際に使ってみるとそこまで難しくはありません。むしろfloatpositionで同じことをするほうが大変です。頭が爆発します。

あと気になるブラウザの対応状況ですが、モダンブラウザはほぼ全てベンダープレフィックス無しで動くので、Webサイトのレイアウト構築にどんどん取り入れてOKです!