6ヶ月でwebデザイナーになれる|デジタルハリウッド
6ヶ月でwebデザイナーになれる|デジタルハリウッド
2013.04.30

CSS3のFlexboxを基本から理解して、使い倒そう!

こんにちは、王です。デザイナーやってます。

今回は「Flexboxを基本から理解して、使い倒そう!」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。

動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ!
デモ

昨今では、デジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。
同じサイトを様々なスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。

「なるべく手間をかけずに作りたい!」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」を始めとした数多くのフレームワークが徐々に脚光を浴び始めて久しくなります。

ただ、これらはあくまで古い技術の組み合わせで、革新的な技術でもなんでもないということを忘れないでください。
グリッドシステムも便利ではありますが、やはりFlexboxに脱皮するまでの過渡期においての一時的な措置にすぎないと思います。

Flexbox自体は言うほど新しい技術ではないですが、仕様がころころ変わって長い間安定せず、使い所も難しかったです。
しかし、最近になってやっと仕様が固まってきたようです!
IE10も含めてモダンブラウザでは普通に使えてるので、時は熟したと見て、最新仕様でガッツリご紹介したいと思います
レスポンシブとの親和性も高いということもあって、早めに使いこなせるようになっておくといいでしょう!

※この記事では、W3Cの2012年9月付の草案を元に書いてますが、仕様が代わり次第更新するつもりです。また、執筆時点では最新の仕様に準拠したブラウザはChromeのみとなっているので、ご確認のときはChromeでしてください。

目次

Flexboxの概要

Flexboxモデルはもともと複雑化したWebアプリのレイアウトを組みやすくすることを目的に開発したものだと思いますが、時代の流れ的にはレスポンシブデザインなどにも応用できたかと。

IE10の開発者向けガイドの記述がとてもよくまとまってるので、引用します。

複雑な Web ページをレイアウトすることを目的とし、画面やブラウザー ウィンドウのサイズがさまざまに変化する場合にも要素の相対的な位置とサイズを一定に保つ場合に、特に役立ちます。位置とサイズを正しく設定するのが難しいフロートへの依存を軽減できます。

つまり、今までJSやCSSのライブラリでしかできなかったことを、ネイティブかつエレガントかつ機能的にやってのけるのだぞ!このやろう!ということです。

Flexboxの基本中の基本

まずは基本から見ていきましょう!

用語

  • Flexboxコンテナー
  • Flexboxモデルを使うためには必ずこの「Flexboxコンテナー」が必要です。CSSで「display:flex」と指定すれば、要素を「Flexboxコンテナー」として定義することができます。

  • Flexboxアイテム
  • 「Flexboxコンテナー」の子要素のこと、「Flexboxコンテナー」の子要素であれば勝手に「Flexboxアイテム」となるので、特にCSSで指定する必要はないです。また、Flexboxアイテムに該当する要素は、様々なFlexboxアイテム用のプロパティが使えるようになります。

    第一歩、「display:flex」

    お馴染みのBoxモデルであれば「block」を指定するところを「flex」で指定してあげることで、その要素を「Flexbox」コンテナーとして定義することができます。
    Flexboxを使うには必ず「Flexboxコンテナー」を作成しておく必要があるので、Flexboxモデルを使う第一歩として、まずは以下のようにします。

    #wrapper{
    	display: -webkit-flex;
    	display: -moz-flex;
    	display: -ms-flex;
    	display: -o-flex;
    	display: flex;
    }

    ※冒頭でも述べましたが、執筆時点では最新の仕様に準拠したブラウザはChromeのみですので、古いプロパティ名と若干異なります。例えば「display: box」や「box-{*}」は全部古い仕様ですので注意してください。