floatやpositionを使わずに要素の並び順や配置位置を柔軟に扱うことが出来るFlexboxですが、関連するプロパティが多くてLeo(@Akamaru12mg)もまだまだ使いこなせていません…
というわけで、Flexboxの各プロパティの挙動を実際にデモを作って確認していきたいと思います。
目次
Flexboxを扱う上で覚えておかなくてはいけないのが、FlexコンテナとFlexアイテムです。
Flexboxを扱う上で必ず必要になるのがこのFlexコンテナです。次に説明するFlexアイテムを格納するための箱のようなもので、要素にdisplay:flex;を指定することで定義することが出来ます。
Flexコンテナの子要素は全てFlexアイテムとなり、これから紹介するFlex用のプロパティが適用できる状態になります。
これらを踏まえた上で、Flexbox用の各プロパティの使い方を見てみましょう。
Flexコンテナにflex-direction:○○を設定すると、子要素（Flexアイテム）の並び順を指定出来ます。
FlexアイテムがFlexコンテナからはみ出した時の折り返しの方法を指定出来ます。
縮むんですね…
Flexアイテムの横方向の配置位置を指定出来ます。
Flexアイテムの縦方向の配置位置を指定出来ます。
Flexアイテムを並べるラインを指定出来ます。
ここはちょっと計算がめんどくさいです。
例えばFlexコンテナの幅に300px、Flexアイテムの幅に50pxを指定したとします。Flexアイテムの数が3つだとすると、150pxの余白が生まれますよね？その余白の分だけFlexアイテムを引き伸ばすことが出来るんですが、その際の伸びる倍率を指定するのがflex-growです。
flex-shrinkはその逆で、Flexコンテナからはみ出したFlexアイテムを縮める際の倍率となります。
まずはこちらのデモをご覧ください。
Flexコンテナの幅は300px、Flexアイテムの幅はwidth:50pxで、左から順にflex-grow:0
flex-grow:1flex-grow:2を指定しています。
余った150pxをflex-growの和（0+1+2=3）で割った数値（50px）が、それぞれのFlexアイテムのflex-growに応じて分配されます。
つまり左は50*0=0、真ん中は50*1=50px、右は50*2=100px伸びます。
基本的にwidthと同じ働きをするようですが、特に違いが分からなかったので省略します…詳しい人教えて…
order:○○に整数を指定すると、数値の低い順にFlexアイテムを並べることが可能です。
指定できるプロパティが多くて難しそうですが、実際に使ってみるとそこまで難しくはありません。むしろfloatやpositionで同じことをするほうが大変です。頭が爆発します。
あと気になるブラウザの対応状況ですが、モダンブラウザはほぼ全てベンダープレフィックス無しで動くので、Webサイトのレイアウト構築にどんどん取り入れてOKです！
