Blogブログ

2017/09/08 WEB

Flexbox入門(2)上下の配置を決めてみよう

イメージ

基本コーダーのOWIEです。
前回の「Flexbox入門(1)まずはボックスを横に並べてみよう」では横並びを実装したので、Flexbox入門(2)では上下の配置を行いましょう。
floatで処理していた時は上下にmarginを振ったり、或いはpositionを使ったり、jsを頼ったりと色々と面倒でしたが、Flexboxはそれらを一行で解決してくれます。

前回のおさらい

上記が横並びの方法でした。ここまで出来ればあとは条件を追加するだけなので簡単です。

上下配置の条件付与はalign-items

初期値(何も設定しない状態)はalign-items: stretch;です。ストレッチ、つまり一番大きなheightを持つボックスを基準に他のボックスが伸びます。色が付いてるとわかりやすいです。

伸びるのが嫌だなーという場合は flex-start を指定すればOKです。

上下センターに合わせたい

今まではposition: relative;のposition: absolute;のmargin: auto;のtop〜bottom: 0;にして…と四苦八苦していた上下センタリングですが、 center を指定することで解決できます。

一番大きなheightを持つボックスを基準に上下にセンタリングされました。

応用して上下左右にセンタリングする

ボタン系で使ったりすることが多いですが、応用で上下左右センタリングも可能です。
設定で条件として

を追加すればOKです。

便利なので多用するとコードが冗長になってしまうのが難点ですが、scssなど使っている場合は@mixinでひとまとめにしておくといいかもしれません。

まとめ

よく使う条件のみの解説でしたが如何でしたでしょうか。他にも最終ラインに揃えるflex-end、ベースラインが一直線になるように配置されるbaselineがありますが、上記をトライしてみて上手く行けば、他の二つも是非試してみてくださいね。

ではまた。