入門Flexbox!CSS3ではじめるあたらしい時代のレイアウト術

入門Flexbox!CSS3ではじめるあたらしい時代のレイアウト術のイメージ

こんにちは、小川です。
突然ですが、みなさんFlexboxを知っていますか?

その名のとおりフレキシブルな(柔軟性のある)あたらしいCSSレイアウトの仕組みです。今まではfloatやpositionを使って並び方や位置を決めていましたが、このFlexboxを使えば要素の大きさやならび方を空きスペース / 超過スペースに合わせて柔軟に計算してくれます。

Flexboxの特徴

デフォルトで左右に配置される。

うえに書いたとおり、これまで要素を横に並べたい場合はfloatやpositionを使う方法が主流でした。この方法だと親要素のコンテナに対してclearfixとかいう謎の呪文をとなえる必要があります。一方、優秀なFlexboxはデフォルトで横にならべてくれます。うわごとのように繰り返したclearfixにさようならを言ってください。

自動で高さが揃う。

これまでfloatやpositionで横にならべた要素は高さを固定にするか、Javascriptで高さを同じにするか、tableのようにしなければなりませんでしたが、Flexboxにそんなものは必要ありません。自動です。大事なことなので2回言います。自動です。

任意の順番に並べられる。

これまで要素の並べ替えはhtmlの順番が基本。4番目を3番目にしたければ移動するしかなかった。Flexboxはそうじゃない。1番目が2番目で4番目が3番目だったりする。頭が混乱するけど、たぶんCSSで順番が指定できるだけ。

空きスペースを計算して挙動が決められる。

これがFlexboxをFlexboxたらしめるポイントだったりする。空きスペースを自動で計算するだけならまだしもそのスペースをどのように使うか指定できます。

Flexboxの定義

Flexboxを定義するには、コンテナ要素に対して

.flexbox{ display:flex; }
を指定するだけです。これでFlexboxコンテナの完成。このコンテナ内の子要素は自動的にFlexアイテムとなります。

See the Pen Flexbox 1 by tako (@next) on CodePen.

flexアイテムの配置と反転

前述のとおり、flexアイテムのデフォルトの配置は水平。でもこれを垂直にもできます。水平なら左から右へ、垂直なら上から下へ配置されますが、要素を反転して表示することも。

.flex-row{ flex-direction:row; } /* 水平 */
.flex-row-reverse{ flex-direction:row-reverse; } /* 水平で反転(右から左へ) */
.flex-column{ flex-direction:column; } /* 垂直 */
.flex-column-reverse{ flex-direction:column-reverse; } /* 垂直で反転(下から上へ) */

See the Pen Flexbox2 by tako (@next) on CodePen.

flexアイテムを任意の順で並べ替える

flexアイテムの順番を任意で並べ替えたいときはorderプロパティを使用します。ソートとか簡単にできそうな気がしなくもない。

#a{ order:2; }
#b{ order:0; }
#c{ order:1; }

See the Pen Flexbox 3 by tako (@next) on CodePen.

Flexアイテムを空きスペースによって伸縮させる

空きスペースを分割して拡大させるflex-grow

空きスペースを分けて拡大したいときには

.flex-item{ flex-grow:1; }
とします。例えば3つのflexアイテムがそれぞれ100pxで、空きスペースが300pxあれば、300pxを1:1:1でわけあってそれぞれのflexアイテムは200pxになり空きスペースがなくなる。

分割の割合を指定したい場合は

.item-second{ flex-grow:3; }
とします。例えば3つのflexアイテムがそれぞれ100pxで、空きスペースが300pxあれば、300pxを1:3:1でわけあって60px:180px:60pxとなり、それぞれのflexアイテムは160px:280px:160pxとなる。

超過スペースを分割して縮小させるflex-shrink

超過スペースを均等に分けて縮小させたいときは

.flex-item{ flex-shrink:1; }
とします。例えば3つのflexアイテムがそれぞれ300pxで、超過スペースが300pxあれば、300pxを1:1:1でわけあってそれぞれのflexアイテムは200pxになり超過スペースがなくなる。

分割の割合を指定したい場合は

.item-second{ flex-shrink:3; }
とします。例えば3つのflexアイテムがそれぞれ300pxで、超過スペースが300pxあれば、300pxを1:3:1でわけあって-60px:-180px:-60pxとなり、それぞれのflexアイテムは240px:120px:240pxとなる。

See the Pen Flexbox 4 by tako (@next) on CodePen.

対応ブラウザ

flexboxの対応ブラウザ
http://caniuse.com/#search=flexbox

まとめ

Flexboxはもっとたくさんのプロパティがありますが、入門ということで特徴をまとめてみました。FlexboxはUI要素やコンポーネントで使用することが推奨されており、ページ全体のレイアウトに使用するのはCSS Grid Layoutという新しい仕組みがありますので、調べてみてください。