flexbox

レスポンシブで大活躍のflexboxを使い倒す(前編)

flexboxプロパティってとても便利ですよね。
便利だなーと思うのですが、毎回使い方を忘れて使うたびにググってます…。
いい加減覚えよう!といういましめエントリーです。

フレックスレイアウト

今までレイアウトには

  • ブロックレイアウト
  • インラインレイアウト
  • テーブルレイアウト
  • 配置レイアウト

がありましたが、フレックスレイアウトという、新しいレイアウトモードが誕生しました。
近年、アプリやWEBページが複雑なレイアウトをする傾向から、CSS3で新しく誕生したレイアウトモードです。

どういうときに使うの?

  • 要素を左右上下と整列させたいとき
  • 横並び要素の高さをそろえたいとき
  • 要素を好きな順序に並び替えたいとき

などなど、用途は様々です。
例えばこういう配置で高さを揃えたいときとか…
sectionの後はh1を置きたいけど、上に画像がいるなーというときとか…

See the Pen doejQa by apct (@apct) on CodePen.


CSSで書くと面倒だったり、以前まではJavascriptで書いていたものが、flexboxのおかげでさくっと作れるようになりました!
ありがとう!flexbox!

ちなみにこのレイアウトでdisplay:tableを使って組んでいるものがW3Cの方にもあるので、興味のある人は是非ソースをのぞいてみてください。
http://www.w3.org/TR/css-flexbox-1/#example-0401c357

flexboxの仕様について

flexboxにはflexコンテナとflexアイテムがあります。

  • 外枠の親要素がflexコンテナ
  • 中にいる子要素がflexアイテム

となります。

親要素に display: flex を指定することで、起点となるflexコンテナを指定できます。
このときflexコンテナ直下の子要素は、何も指定しなくても勝手にflexアイテムになります。

また、display: flex を指定すると、float: left のように要素を横並びすることができます。
float: left だと、左に流れ込む形になるので、位置調整が必要になりますが、display:flex だと、その要素内のアイテムのサイズ調整や、位置調整がすごく簡単になります。

< ! — ベンダープリフィックスについて — >
最新ブラウザにはベンダープリフィックスなしで実装できるものもありますが、バージョンによって無理なものもあります。
なので一応 display:-webkit-flex; と指定します。
また、Android4.3以降や、iOSの6.1以前などでは display:-webkit-box;
IE10も視野にいれるようであれば display:-ms-flexbox; の記述も必要になります。

詳しいサポート状況はこちら
Can I use… Support tables for HTML5, CSS3, etc

以下、文字にすると分かりづらいのでサンプルを作成してみました。
ベンダープリフィックスをあまりつけずに書いているので、ブラウザによってはうまく表示できません…

flexboxのサンプル

flex-direction (並び順)

See the Pen YXLRXv by apct (@apct) on CodePen.


※初期値はrow。

flex-wrap(一行・複数行)

See the Pen rVvQej by apct (@apct) on CodePen.


※初期値はnowrap

flex-flow(flex-direction + flex-wrapのショートハンド)

See the Pen eNrQdg by apct (@apct) on CodePen.


※初期値はrow nowrap

justify-content (横方向の寄せ指定)

See the Pen PqeRjr by apct (@apct) on CodePen.

align-items / align-self (縦方向の寄せ指定)

See the Pen LVmgBy by apct (@apct) on CodePen.

align-content (縦方向の揃え方)

See the Pen oXdQwy by apct (@apct) on CodePen.

※align-contentを設定するときは、flex-flow: wrap; で縦に配置する必要があります。

order(表示順)/ flex(幅)

See the Pen NqMorB by apct (@apct) on CodePen.

orderの数値は整数で、初期値は0になりますが、一番最初に表示したい場合に-1を指定することもできます。
サンプルでは横でしか実装してないですが、縦もいけます。

flex-grow(伸びる倍率)
flex-shrink(縮む倍率)
flex-basis(ベースとなる長さを設定)
flex(flex-系のショートハンド)

See the Pen RPJMBE by apct (@apct) on CodePen.

flex-growとflex-shrinkはデフォルト値が0でマイナスの値は無効になります。
flex-basisはデフォルト値はautoです。
flexのデフォルト値は 0 1 autoです。

まとめ

会社のコーディングでよくぴっちり幅を揃え、かつ整列をしているデザインが多くて中々苦労することが多かったのですが、flexboxを覚えるとあっという間に実装できるのでうれしいかぎりです。

ただ今回、サンプルを作ったら覚えるかなと思い色々とがんばって作ってみたのですが、flex-growとflex-shrinkの仕組みやflexのショートハンドの書き方に大分つまずいてしまいました…。
ので、また次回に改めてもう一記事くらい書こうかなと思います。

Pocket