※この記事では、W3Cの2012年9月付の草案を元に書いてますが、仕様が代わり次第更新するつもりです。また、執筆時点では最新の仕様に準拠したブラウザはChromeのみとなっているので、ご確認のときはChromeでしてください。
Flexboxモデルはもともと複雑化したWebアプリのレイアウトを組みやすくすることを目的に開発したものだと思いますが、時代の流れ的にはレスポンシブデザインなどにも応用できたかと。
- Flexboxコンテナー
Flexboxモデルを使うためには必ずこの「Flexboxコンテナー」が必要です。CSSで「display:flex」と指定すれば、要素を「Flexboxコンテナー」として定義することができます。
- Flexboxアイテム
「Flexboxコンテナー」の子要素のこと、「Flexboxコンテナー」の子要素であれば勝手に「Flexboxアイテム」となるので、特にCSSで指定する必要はないです。また、Flexboxアイテムに該当する要素は、様々なFlexboxアイテム用のプロパティが使えるようになります。
第一歩、「display:flex」
お馴染みのBoxモデルであれば「block」を指定するところを「flex」で指定してあげることで、その要素を「Flexbox」コンテナーとして定義することができます。
Flexboxを使うには必ず「Flexboxコンテナー」を作成しておく必要があるので、Flexboxモデルを使う第一歩として、まずは以下のようにします。
1
2
3
4
5
6
7
|
#wrapper{
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -o-flexbox;
display: flexbox;
}
|
※冒頭でも述べましたが、執筆時点では最新の仕様に準拠したブラウザはChromeのみですので、古いプロパティ名と若干異なります。例えば「display: box」や「box-{*}」は全部古い仕様ですので注意してください。
「Flexboxコンテナー」で指定できるプロパティ
ではさっそく「Flexboxコンテナー」で指定できるプロパティを見ていきましょう。
「flex-direction」：子要素の配置方向
まずは子要素の配置方向から。
row
初期値です。子要素はHTMLの書き順で、左から右に配置されます。
column
子要素はHTMLの書き順で、上から下に配置されます。
row-reverse
「row」と同じで横に配置されるが、並ぶ順序は「右から左」になります。
column-reverse
「column」と同じで縦に配置されるが、並ぶ順序は「下から上」になります。
「flex-wrap」：子要素の折り返し設定
flexboxは「単一行」か「複数行」にすることができます。
単一行：子要素を全て一行に詰めようとする。親要素からはみ出ても「改行」は決してしない。
複数行：floatと似ていて、子要素が親の長さを超えてしまった場合、折り返して「複数行」に分割される。
nowrap
初期値、折り返しなし、つまり「単一行」。
wrap
折り返しを許可、「複数行」。
wrap-reverse
「wrap」と同じで、ただ、折り返し地点が逆になります。
「flex-flow」でまとめて記述
「flex-direction」と「flex-direction」をまとめて記述できる。例えば子要素を縦に配置し、かつ折り返しありの場合だと
1
2
3
|
div {
flex-flow: column wrap;
}
|
justify-content：水平方向の揃え方
「flex-direction」で指定した子要素の配置方向をベースに、様々な揃え方を指定できます。
※「利用可能な領域」が存在するときにのみ効果を確認できます。具体的に、「flex」プロパティが設定されてないときか、設定したが最大サイズに達したときです。「利用可能な領域」がないと、そもそも「揃える」意味がないんです。
flex-start
横配置の場合、「左揃え」、縦配置の場合、「上揃え」になります。
flex-end
横配置の場合「右揃え」、縦配置の場合「下揃え」になります。
center
「中央揃え」です。
space-between
均等に間隔を空ける
space-around
「space-between」と同じく均等に間隔を空ける。違うのは、左右の端のFlexアイテムにも半分ずつ間隔を空けてるところ。
align-items：垂直方向の揃え方
「justify-content」と似ていますが、揃える軸は「justify-content」の垂直方向の軸となります。デフォルトでは、垂直方向に揃えることになっているはずです。
「justify-content」との組み合わせで、従来では難しかった「水平垂直中央揃え」などが簡単に実現できます！
この辺りから結構混乱してくると思いますが、実際にコードを書いてみながら読んで頂けると理解しやすいのかなと。
flex-start
横配置の場合「上揃え」、縦配置の場合「左揃え」になります。
flex-end
横配置の場合「下揃え」、縦配置の場合「右揃え」になります。
center
「中央揃え」です。
baseline
ベースラインを揃えます。
stretch
Flexアイテムの高さが設定されている場合、上下一杯まで広げます。設定されていない場合、コンテンツの一番多いFlexアイテムの高さに合わせて自動的に広げます。
align-content：行の揃え方
「flex-wrap」で「nowrap」以外に設定した場合のみ有効です。複数行になったときの揃え方です。「justify-content」と似ています。
flex-start
横配置の場合「上揃え」、縦配置の場合「左揃え」になります。
flex-end
横配置の場合「下揃え」、縦配置の場合「右揃え」になります。
center
「中央揃え」です。
space-between
均等に間隔を空ける。
space-around
「space-between」と同じく均等に間隔を空ける。違うのは、上下の端の行にも半分ずつ間隔を空けるところ。
「Flexboxアイテム」で指定できるプロパティ
flex：伸縮性設定全般
恐らくFlexboxアイテムで最も重要かつ最も難解なプロパティでしょう！
Flexboxモデルを扱う上で必ずと言っていいほど使うプロパティです。分かりやすく説明しますので、しっかり理解しましょう！
まず言っておきたいのは、この「flex」というプロパティは実は
‘flex-grow’、’flex-shrink’、’flex-basis’
上の3つのプロパティのショートハンドです（記述する順番で書いてます）。
別々で書くのではなくflexでまとめて書く場合が多いと思うので、これらのプロパティをこのセクションでまとめて説明します。
flex-grow
Flexアイテムの「伸びる」倍率。Flexコンテナーが全てのFlexアイテムを格納切ってなお余りのスペースがある場合、各自の「flex-grow」プロパティに従い、自動的に利用可能な領域いっぱいまで伸びる。
flex-shrink
Flexアイテムの「縮む」倍率。Flexコンテナーが全てのFlexアイテムを格納し切れない場合、各自の「flex-shrink」プロパティに従い、ちょうど格納できるように、自動的に縮む。
flex-basis
このプロパティは「width」とほぼ同じ働きをします。要するにベースとなる長さ、或いは「最小の長さ」を設定できるというわけです。省略した場合、値は「0」と指定されます。
この他、「auto」と指定することもできる。「auto」と指定した場合、Flexアイテムの「コンテンツサイズ」に設定される。各Flexアイテムのコンテンツサイズが違うと長さもまちまちになるので、絶対的な長さを指定したい場合は「auto」ではなく数字で指定するといいです。
上記の説明を読んでもピンと来ない方も多いのではないかと思いますので、具体的なアルゴリズムを下記の図解で説明します。
図解では「flex-grow」を例に説明していますが、「flex-shrink」も同じ要領で長さを算出します。
取り立てて説明する必要もないと思うので、ご自分で確認してみてください。
※「none」と指定した場合、 ‘0 0 auto’と見なされる。
align-self：個別のFlexアイテムの垂直方向の揃え方
「align-items」と全く同じように機能するが、こちらは「個別のFlexアイテム」に対して指定するものです。
各プロパティに関しては「align-items」を参照してください。
order：順番指定
FlexboxアイテムにはデフォルトでHTMLの記述順に順番を振ってあります。「order」を使えば、その順番を変えることができます。
以下はorderによって、「２」と「４」の順番を交換している図解です。
※「order」プロパティによって変えられたのはあくまでビジュアル的な順番です。実際にHTMLの構造自体を変えたことではないので、スピーチ機能やJSなどの論理的なタスクを行う上で支障が出る場合があります。
ブラウザサポートについて
この記事で示されている情報は全て最新の仕様を参考にしているので、Chrome以外のブラウザでは動かない場合もあるかもしれません。
そこを考慮して、これまでの仕様変更の経緯を表にまとめたものを載せておきますので、クロスブラウザが気になる方はどうぞご参考下さい。
| 最新仕様 | 2009仕様 | 2011仕様 |
|---|
| display: flex | display: box | display: flexbox |
| flex-direction: row | box-orient: horizontal | box-orient: horizontal |
| justify-content: flex-start | box-pack: start | box-pack: start |
| align-items: flex-start | box-align: start | box-align: start |
| flex: 1 | box-flex: 1 | flex: 1 |
※2014/7/14 13:00追記 タグの一部を修正させていただきました。
まとめ
一通り読んでいただけましたでしょうか。
「FlexBoxはすごくない」と思う方は、恐らくいないかと思います。それだけインパクトと将来性を持っているのです！
まだこの先、仕様変更や追加の危惧もありますが、それ以上に私たちが今まで使ってきたBoxモデルを根底から覆すような底力を秘めていることは言うまでもありません。新生デザイナー達に「あの頃は・・・。」といった話ができてしまうような未来がありありと浮かんできます！
その日に備えて、皆さんもぜひ積極的に取り入れていこう！
