cssのdisplay:flex(flex box)を使った色々な段組みを作ってみる。1:2や2:1等

cssのdisplay:flex(flex box)を使った色々な段組みを作ってみる。1:2や2:1等

Webサービスを作る際に、1:2や2:1の段組みを作る場合等に、flex boxが大いに役に立つ。
今回はそのflex boxについてまとめてみた。
flexに使い慣れると、あの忌まわしき「float: left;」を使わなくて済むので是非習得しましょう!

flex boxとは

flex boxとかdisplay:flexとか表記ゆれが激しいけど何なの?とお思いの方もいると思うのでまずflexboxとは何ぞやから。
flexboxとはFlexible Box Layout Moduleのことで、その名の通り、フレキシブル(柔軟)に箱形のレイアウトが作れちゃう機能である。
凄い人になるともはや箱形ではなくなるので、Boxの翻訳は一つのまとまりくらいの意味の方が良いかもしれない。
display:flexとは、実際にcssで指定する際の書き方である。

flex box使うと何が良いの?

ではflex boxを使うと何が良いのか?floatでいいじゃんという人もいるかもしれない。
floatについては、また別途まとめるが、とにかくレイアウト崩れを頻繁に起こすので使用は推奨しかねるとだけ述べておく。
とはいえ、基本的に殆どのレイアウトはinline-blockを駆使したり、position:relativeとabsoluteを使って組むことが可能だ。
ただ、positionを使う場合、絶対的な位置指定になるので、テキスト量等によって幅を伸ばしたい場合に向かない。
inline-blockの場合、要素を並べるために更にその要素をカバーするdivを用意して・・・という手間が発生してしまう。
さらに、殆どはdivで囲むことになると思うので、これはSEO的にもよろしくない

そんなときにflex boxがお役立ちという訳である。

実践

では実際にflexを使っていく。

まず簡単に横に並べる。

まずは簡単なものから作っていく。
とりあえず、一列に要素を並べる。普通なら、「display:inline-block」を指定して終わりでいいパターン。
上がflex、下がinline-block。

See the Pen flex-basic by blue (@aoiBlue) on CodePen.0

このようになる。
ulタグを使うと、普通font-size分の空白がli間に入るが、flexを指定すると空白が無くなっているのがわかる
inlineを使う際に空白を無くしたいときはulにfont-sizeを0にする指定を入れ、
flexを使う際に空白を入れたい場合はmargin-leftをliに入れると良いです。(その際はnot(:first-child)を入れるのを忘れずに)

2:1の段組みをする

続いて、次のような段組みのボックスを並べていきたい。
1tai2

実際に作ってみたのがこちら。
引き続き上がflexを使ったもの、下がinline-blockを使ったもの。

See the Pen flex-1:2 by blue (@aoiBlue) on CodePen.0

今回は、

 // 要素の向きを指定
  flex-direction: column;
 // 要素の折り返しを指定
  flex-wrap: wrap;

というものを使います。
コメントにも簡単説明がありますが、「flex-direction: column;」は、要素の並ぶ向きを決定することが出来ます。
columnの場合、「カラム」つまり、「列」になりますから、縦方向(下の方向)に要素が並んでいきます。
続いて、「flex-wrap: wrap;」は、wrapするか、つまり折り返しするか、という指定です。
これを入れない場合、要素は無理やり下方向に展開するために、height指定を無視して縮み、親要素で指定した高さにおさまります。
wrapを指定しておけば、要素が限界まで縦に並ぶと、自動的に折り返しをしてくれます
限界のwidthを無視した場合、上の方の要素のwidthを優先し、後半のwidthは縮みます。

ちなみに、display-inlineを使った実装の何が問題なのかというと、
データ構造が壊れているということです。
flexを使えば、<dl><dt><dd>というタグを作って、データ構造を作ることが出来ます。

大体段組みを作る場合、写真、タイトル、説明文・・・のような構造になっているので、
そういったものはSEO的にはdlタグを使うべきです。しかし、下のパターンの場合一つ目の要素と二つ目・三つ目の要素を並べるために二つ目、三つ目をラップする要素が必要になってしまうため、
データの構造が壊れてしまう(何処かにはdivタグを使うしかなくなってしまう)という訳です。
(今回の例は極端に悪い例(divを多用)していますが、一応divを一個に抑えることは可能です。
ただ、それでもdlを使って関係のあるものは全てdlタグにまとめた方が良いと思います。)

※もちろんdlタグの使用が適さないパターンでは無理にdlを使わなくてもいいですし、inline-blockを使ってよいと思います。

2:1の段組みを、要素幅を可変で行う

では続いて、要素幅を可変で行います。
1:2の段組みの方では、単純にブロックを積み重ねていますが、実際は中に文章や画像が入って、要素幅にばらつきがある場合があると思います。
この説ではそう言う場合のflexの使い方を解説します。

作りたいものはこんなイメージ。
2tai1long

実際に作ったのはこれ。

See the Pen flex-2:1 by blue (@aoiBlue) on CodePen.0


画像の縦幅は可変です。今回はinlineを使った例はありません。
(作成自体は可能ですが、ネストが深くてcss書くのが辛かったのでやめました)

今回は、可変にするにあたってpositionを使って要素位置を指定しています
というのも、前回の方法だと高さの限界に来たら折り返してしまうため、要素幅を可変にすることが出来ませんでした。
可変にするためには、今回のようにpositionを使って左端(更に要素を横に並べていく場合は二行目、三行目も)の要素を絶対位置指定で設置してしまいます。
そのうえで、可変にしたい要素をmarginで横にずらして表示する、というわけです。
この方法で要素の長さを可変にすることができます。(今回はheightを可変にしましたが、widthも可能です。)

まとめ

というわけで、色々とflex boxを使って遊んでみました。
何かデータ構造の段組みレイアウトを作りたい場合は、flex boxとdlタグを組み合わせるのがオススメです。
慣れるまでは面倒だと思いますが、慣れると面倒なcss作業から解放されます。

※ただし、IEにバグがあります。お気を付けください。(IE絶許)

他にもflex-shrinkなど便利オプションがあるのですが、それはまた気が向いたらまとめていきたいと思います。

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ
CSSを書くのって大変ですよね。親要素が何処で・・・って管理が凄く面倒だと思います。
そういう場合にこの書籍がオススメです。
Sassというのはcssのメタ言語(拡張言語)で、ネストした書き方や、
変数、mixinという、プログラミング言語で言うメソッドのようなものを使うことも可能です。
この書籍は、そのSassの使い方について書かれています。
とても分厚いですが、難しいことは考えずにネストの項目だけ読めば実践では十分です。
興味があれば他の項目も是非読んでみてください。