こんにちは、王です。デザイナーやってます。
今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。
動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！
デモ
昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。
同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。
「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。
ただ、これらはあくまで古い技術の組み合わせで、革新的な技術でもなんでもないということを忘れないでください。
グリッドシステムも便利ではありますが、やはりFlexboxに脱皮するまでの過渡期においての一時的な措置にすぎないと思います。
Flexbox自体は言うほど新しい技術ではないですが、仕様がころころ変わって長い間安定せず、使いどころも難しかったです。
しかし、最近になってやっと仕様が固まってきたようです！
IE10も含めてモダンブラウザでは普通に使えてるので、時は熟したと見て、最新仕様でガッツリご紹介したいと思います。
レスポンシブとの親和性も高いということもあって、早めに使いこなせるようになっておくといいでしょう！
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-{*}」は全部古い仕様ですので注意してください。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
