FlexBoxレイアウトについて学習します。
Flexアイテムの設定を理解することが目的です。
Flexアイテムの設定
flexプロパティは、flex-grow , flex-shrink , flex-basisプロパティの一括設定です。
3つ覚えて記述するよりも、覚えやすく効率もいいので、flexプロパティを覚えておきましょう。
特に、FlexBoxを使ったアイテム幅の設定は、flexプロパティを使った方がwidthより優先され、融通も効きやすくなります。
Flexアイテムのセレクタ{
flex: 0 1 50%; /* 値は伸率 縮率 基本幅の順 */
}アイテム幅はwidthかflexか？
アイテム幅をwidthを200pxで設定しても、コンテナが小さくなるとアイテム幅も小さくなります。
flexで縮まない設定をすることで、アイテム幅を200pxで固定表示できます。
See the Pen 15-2 by Rayout-gw (@Rayout-gw) on CodePen.
widthとflexを同時に使っても、flexが優先されます。
See the Pen 15-2-2 by Rayout-gw (@Rayout-gw) on CodePen.
flexレイアウトの時は、flexプロパティを使え！ということですね
アイテムの伸び率
値は「0」が伸びない、「1」以上は伸びる設定で、数字は余白を割り当てる比率です。
（「伸びない」にしないと指定した幅の意味がなくなります）
See the Pen 15-2-3 by Rayout-gw (@Rayout-gw) on CodePen.
アイテムの縮み率
値は「0」が縮まない、「1」が縮む設定のどちらかです。
（「縮む」にしないとハミ出てしまいます）
See the Pen 15-2-4 by Rayout-gw (@Rayout-gw) on CodePen.
基本は「0 1 幅」で設定するといいですよ
Flexアイテムの並び順
orderプロパティを使って、並び順を変えることができます。
See the Pen 15-1-9 by Rayout-gw (@Rayout-gw) on CodePen.
HTMLの文脈の流れはそのままで、見た目だけ順番を変える時に便利です。
FlexBoxの便利な使い方・テクニック
画面のど真ん中にボックスを表示
See the Pen 15-2-5 by Rayout-gw (@Rayout-gw) on CodePen.
横スクロールでスライド表示したい
See the Pen 15-2-6 by Rayout-gw (@Rayout-gw) on CodePen.