基本コーダーのOWIEです。
前回の「Flexbox入門（１）まずはボックスを横に並べてみよう」では横並びを実装したので、Flexbox入門（２）では上下の配置を行いましょう。
floatで処理していた時は上下にmarginを振ったり、或いはpositionを使ったり、jsを頼ったりと色々と面倒でしたが、Flexboxはそれらを一行で解決してくれます。
前回のおさらい
- 親boxにflexを付与する
- flexの条件を付与する
- 子boxにwidthを指定する
上記が横並びの方法でした。ここまで出来ればあとは条件を追加するだけなので簡単です。
上下配置の条件付与はalign-items
初期値（何も設定しない状態）はalign-items: stretch;です。ストレッチ、つまり一番大きなheightを持つボックスを基準に他のボックスが伸びます。色が付いてるとわかりやすいです。
伸びるのが嫌だなーという場合は flex-start を指定すればOKです。
上下センターに合わせたい
今まではposition: relative;のposition: absolute;のmargin: auto;のtop〜bottom: 0;にして…と四苦八苦していた上下センタリングですが、 center を指定することで解決できます。
一番大きなheightを持つボックスを基準に上下にセンタリングされました。
応用して上下左右にセンタリングする
ボタン系で使ったりすることが多いですが、応用で上下左右センタリングも可能です。
設定で条件として
- justify-content: center;
- align-items: center;
を追加すればOKです。
便利なので多用するとコードが冗長になってしまうのが難点ですが、scssなど使っている場合は@mixinでひとまとめにしておくといいかもしれません。
まとめ
よく使う条件のみの解説でしたが如何でしたでしょうか。他にも最終ラインに揃えるflex-end、ベースラインが一直線になるように配置されるbaselineがありますが、上記をトライしてみて上手く行けば、他の二つも是非試してみてくださいね。
ではまた。
