【JSいらず】CSS3 のFlexbox を使った、イマドキの上下中央配置レイアウト

HTML・CSS

Flexboxは実戦投入していますか？

この便利なボックスレイアウトを使えば散々制作者の頭を悩ませた横並びレイアウトが簡単に出来ます。
プロパティが多くて「アレをするにはどうするんだったっけ・・・？」となることも多々ありますが・・・。

See the Pen Basic Flexbox by Chiaki (@mellowchanter) on CodePen.

基本的には、上のソースコードのように display:flex; を指定すれば、子要素がキレイに横並びになります。
子要素の幅を変えたいときは、子要素に flex-basis: サイズ; を指定しましょう。

もっと詳しくFlexboxの使い方を知りたい方は、下記のURLを参考にしてみてください。

また、今回のソースコードでは .p-classname というようなCSSの記述の仕方をしていますが、これはFLOCSSというCSS設計を用いています。
TipsNoteでも最近CSS設計について取り上げた記事が書かれたので、興味のある人はこちらも読んでみてくださいね！

CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える

今回実装してみるデザインはこちら

最近結構よくみかける感じの横並びレイアウトだと思います。
レスポンシブの幅によって横並びを2行や3行に変えてみたり・・・Flexboxを指定すると苦労なく設定できるのがいいですね。

ポイントは

横一列ごとに高さを揃えた横並びであること
各ブロックの画像の背景には、高さ100%で背景色をつける

ですね。
こんなレイアウト、Flexboxを使えば余裕ですよね！ということで、組んでみました。

See the Pen horizontal list by Chiaki (@mellowchanter) on CodePen.

おや？縦方向に揃いませんね・・・。

このコードでは、親要素に display: flex; と align-items: center; を指定し、
子要素に対しては width: 50%; で横幅を指定、display: table; と　vertical-align: middle; を使って横並びにさせようとしています。私がコーディングするとき、上下中央のレイアウトではよく使う手法です。

各ブロック内ではきちんと上下中央になっていますが、横並びがうまくいっていません。
バッチリ横並びになるのかとおもいきや・・・まさかの揃わない結果にちょっと動揺しました。

では、どうすればいいのか？

答えは簡単です。子要素にも display: flex; を指定すればいいのです！
子要素には flex-basis や flex-shrink といった、子要素に指定するプロパティがあるので、てっきり display: flex; は使えないのかと思い込んでいました・・・！思い込みってこわい。

というわけで、子要素に display: flex; と、上下センターにするための align-items: center; を指定してみます！
また、 display: flex; に変更するので、子要素の width: 50%; も flex-basis: 50%; に変更し、孫要素に指定していた display: table-cell; と vertical-align: middle; は削除していますのでご注意下さい。（テーブルレイアウト用の記述は全部削除、という感じです）

See the Pen horizontal list fork by Chiaki (@mellowchanter) on CodePen.

そろっ・・・・た・・・！？
確かにボーダーのラインは揃って、中の要素もちゃんとセンターになっています。背景がなければこのコードで十分でしょう。
ただ、今回のデザインはサムネイルの背景に色が敷いてあります。デザインに合わせようとすると、このままではまだ足りません。
更に display: flex; を入れ子にする必要があります。

最終的なコードはこうなりました

See the Pen horizontal list fork_fix by Chiaki (@mellowchanter) on CodePen.

親、子、孫、全てに display: flex; を指定しています。
孫要素に背景を敷きたい場合は、親や子要素に align-items: center; を指定すると、このサンプルのようにきちんと最後まで背景が敷かれないので注意して下さい。
単純に、画像とテキストを横並びにするだけであれば、ひとつ前のサンプルコードで十分です。
また、孫要素が display: flex; になった場合、 text-align: center; では水平方向の中央に画像がこなくなります。
justify-content: center; を使用することで水平方向の中央に配置されますので、こちらの指定も忘れないようにしましょう。

ちなみに

FlexboxはIE10以降でないと使えません。ただ、Microsoftでは、すでにIE8はサポートされておらず、VistaでIE9がサポートされていますが、普及率は相当低いというのが現状です。
ユーザー環境によって古いブラウザを無視するのは難しいケースもあると思いますが、IE11以上の対応で問題ない場合が増えているのではないかなと思います。
制作者は古いIEやOSを使うことのセキュリティリスク、そしてサイトを訪問するユーザーさんのブラウザ使用状況など、あらゆるものを考慮して、新しいOS・ブラウザを使うことを提案していきたいですね。