CSS Grid Layout Moduleが出たのに何を今更という話なのですが・・・
最近Bootstrapを本格的に使い始めました
フリーランスでやってるとスピード重視の案件なんかもありまして、それらを捌くにはそろそろ使い始めないとな～と思いまして
で、Bootstrapを使用していて避けては通れないのが「Flexbox」です
Bootstrap以前から使ってはいたのですが、なんとなく使ってたのでこの機会に色々調べてみました
そもそもFlexboxってなんぞや
Flexboxとは、要素のサイズが不明なものでもダイナミックに変化するものでも柔軟なレイアウトを実現できるCSS3の新しいレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。
コリス様から引用
W3Cの英文はこちら
レイアウトモジュールってなんぞやって話は置いておいて、簡単にまとめると
「CSS3から追加された、従来よりレイアウトを簡単に行えるようにできる道具」って感じかと
しかもダイナミックな変化にも対応できるという素晴らしい機能もあります
Flexbox無しでレスポンシブウェブデザインの再現は出来なかったと思います
以前のCSSでのレイアウト方法といえばfloatが主流でした
floatでのレイアウトの場合、表示崩れが発生しやすいという問題もありました
そもそもfloatはボックスを「浮かせる」というプロパティですので、floatが設定されているボックスは親要素から高さを無視されるという仕様があります
また、floatが設定されているボックスは以降全てのボックスに影響しますので、clear等でfloatの影響を解除する等の処置が必要でした
floatでのレイアウトは少し難易度が高いものでしたが、Flexboxの登場でCSSでのレイアウトはかなり楽になったと思います
対応状況
リリースから時間も経ってますし2017年10月時点でほぼ全てのブラウザに対応しておりますね
※IE11が怪しいですがいつものことです
使い方
今更使い方を説明するのもアレなんですが、メリット・デメリットのお話もしたいので基本的な部分だけ説明させていただきます
Flexboxは「flex container」と「flex items」で構成されています
画像はこちらから引用
まずコンテナになる親要素に下記のプロパティを設定します
.flex-container {
display: -webkit-flex; /* Safari */
display: flex;
}
「display: flex;」が設定されたボックスの子要素は全てアイテムとなり、親要素の配置用プロパティで配置を管理されますが、子要素側で配置位置を指定することも可能です
配置用のプロパティは結構な量が用意されているのですが、チートシートを作成された方がいらっしゃるのでそちらも合わせてご紹介します
●コンテナ用のプロパティ
| プロパティ | Value / Initial | 備考 |
|---|---|---|
| flex-direction | [Value] row、row-reverse、column、column-reverse[Initial] row |
Flex container内のitemの並びを縦か横に設定 |
| flex-wrap | [Value] nowrap、wrap、wrap-reverse[Initial] nowrap |
Flex container内のitemの折り返しの指定 |
| flex-flow | [Value] <flex-direction> || <flex-wrap>[Initial] row nowrap |
flex-directionとflex-wrapをまとめて設定 |
| justify-content | [Value] flex-start、flex-end、center、space-between、space-around[Initial] flex-start |
横並びの位置を指定（左揃え、右揃え、中央揃え、均等配置） |
| align-items | [Value] flex-start、flex-end、center、baseline、stretch[Initial] stretch |
縦並びの位置を指定（上揃え、下揃え、中央揃え、ベースライン、等幅） |
| align-content | [Value] flex-start、flex-end、center、space-between、space-around、stretch[Initial] stretch |
複数行にまたがった縦並びの位置を指定（上揃え、下揃え、中央揃え、均等配置） |
●アイテム用のプロパティ
| プロパティ | Value / Initial | 備考 |
|---|---|---|
| order | [Value] <integer>[Initial] 0 |
Flex itemの並び順を指定 |
| flex-grow | [Value] <number>[Initial] 0 |
Flex itemが画面幅に満たない場合に伸びる倍率
* デモはFlexプロパティに集約 |
| flex-shrink | [Value] <number>[Initial] 1 |
Flex itemの幅が画面サイズより小さい場合に縮む倍率
* デモはFlexプロパティに集約 |
| flex-basis | [Value] content、<‘width’>[Initial] auto |
Flex itemの基準幅を設定
* デモはFlexプロパティに集約 |
| flex | [Value] none、[ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ][Initial] 1 0 auto |
flex-grow、flex-shrink、flex-basisをまとめて指定 |
| align-self | [Value] auto、flex-start、flex-end、center、baseline、stretch[Initial] auto |
Flex itemの縦並び位置を指定 |
チートシートはこちら（クリエイターボックスさん）
メリットとデメリット
ザックリと使い方の説明をさせていただきましたが、プロパティだけでほとんどのレイアウト方法を表現できると思います
とても便利なのですがデメリットもあります
●メリット
・コツさえ覚えれば比較的習得が用意である
・空白などをある程度自動的に設定してくれるので楽
・CSSのコード行数を減らせる（と思う）
●デメリット
・ほぼ全てのブラウザに対応はしているが、ブラウザごとの解釈の違いが存在する
（例ですが、padding値を%で指定した場合、FirefoxとChromeでは表示にずれが生じます）
・古いブラウザでは対応していない（これは無視できる範疇だとは思いますが・・・）
・HTMLのコード行数が増える（気がする）
HTMLのコード行数に関しては、どうしても親子構造を作らなければいけないため
階層構造が増えるからと思うのですが、逆にうまく構造化すればマークアップもキレイに鳴るんじゃないかな？というポジティブな考え方もできます
まとめ
ざっくりと調べたことをまとめましたが、Flexboxは結構奥深いです、特にブラウザ間での表示差異を調べてくと細かいものは結構ありました
しかしそれを考えてもメリットの方が大きいと思います
そのうち「CSS Grid Layout Module」に取って代わられるとは思いますが、もし使ってない方は今からでも遅くはないので使ったほうがいいと思います
コメント