ＨＴＭＬ５の　Flexbox　で何ができるか分かる短い動画をご紹介。勉強の為に引用させて頂きました。 ~ ホンダフリードの運転手左足前がフラットになったら4台欲しい。村野小春さんと大きな新居で赤ちゃんも作り結婚祝いも欲しい。L-570の100周年版とD2RとDST-Lacertaと特注スピーカーも欲しい。

2015年7月22日水曜日

ＨＴＭＬ５の　Flexbox　で何ができるか分かる短い動画をご紹介。勉強の為に引用させて頂きました。

勉強の為に引用しました。：
http://liginc.co.jp/web/html-css/css/21024

今回は「Flexboxを基本から理解して、使い倒そう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。
動画ＵＲＬ：
https://youtu.be/qY64VacE51g

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

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

「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「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-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」をまとめて記述できる。例えば子要素を縦に配置し、かつ折り返しありの場合だと

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モデルを根底から覆すような底力を秘めていることは言うまでもありません。新生デザイナー達に「あの頃は・・・。」といった話ができてしまうような未来がありありと浮かんできます！
その日に備えて、皆さんもぜひ積極的に取り入れていこう！

ホンダフリードの運転手左足前がフラットになったら4台欲しい。村野小春さんと大きな新居で赤ちゃんも作り結婚祝いも欲しい。L-570の100周年版とD2RとDST-Lacertaと特注スピーカーも欲しい。

2015年7月22日水曜日