【連載】CPIエバンジェリストのお悩み相談室②
これからはFlexboxの時代!?
思わずテンションが上がってしまうCSS3のレイアウトモジュール「Flexbox」(後編)
→ 前編はこちら
[目次]
・Flexboxの基礎
・Flexboxのプロパティ
・参加者からの質問
●Flexboxの基礎
それでは実際にFlexboxの使い方をご紹介します。 Flexboxは、まず親要素をFlex containerにします。Flex containerは、displayプロパティにflexを(display:flex;)指定します。
<div class="flex-container">
<div class=”item”>Flex item</div>
<div class=”item”>Flex item</div>
<div class=”item”>Flex item</div>
</div>
CSS
.flex-container{
display: flex;
}
●Flexboxのプロパティ
Flexboxのプロパティは多いと思われがちですが、全部で12種類です。 Flex containerに使えるプロパティと、Flex itemに使えるプロパティがそれぞれあります。
[Flex containerプロパティ]
プロパティ | 指定できる値 | 説明 |
flex-direction | [Value] row、row-reverse、column、 column-reverse [Initial] |
Flex container内のitemの並びを縦か横に設定 |
flex-wrap | [Value] nowrap、wrap、wrap-reverse [Initial] |
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] |
横並びの位置を指定(左揃え、右揃え、中央揃え、均等配置) |
align-items | [Value] flex-start、flex-end、center、baseline、stretch [Initial] |
縦並びの位置を指定(上揃え、下揃え、中央揃え、ベースライン、等幅) |
align-content | [Value] flex-start、flex-end、center、space-between、space-around、stretch [Initial] |
複数行にまたがった縦並びの位置を指定(上揃え、下揃え、中央揃え、均等配置) |
[Flex itemプロパティ]
プロパティ | 指定できる値 | 説明 |
order | [Value] <integer> [Initial] |
Flex itemの並び順を指定 |
flex-grow | [Value] <number> [Initial] |
Flex itemが画面幅に満たない場合に伸びる倍率 |
flex-shrink | [Value] <number> [Initial] 1 |
Flex itemの幅が画面サイズより小さい場合に縮む倍率 |
flex-basis | [Value] content、<'width'> [Initial] |
Flex itemの基準幅を設定 |
flex | [Value] none、[ <‘flex-grow’> <‘flex-shrink’?? || <‘flex-basis’> ] [Initial] |
flex-grow、flex-shrink、flex-basisをまとめて指定 |
align-self | [Value] auto、flex-start、flex-end、center、baseline、stretch [Initial] |
Flex itemの縦並び位置を指定 |
Flexboxの基礎は以上です。これらのプロパティを使うことにより、これまで実現が難しかった複雑なレイアウトを簡単に構築できます。
●セミナー参加者からの質問
では、セミナー参加者からの質問を見てみましょう。
Flexboxを学ぶ上で、最低限覚えておいた方が良いことや参考になるサイトがあれば教えてほしい。
回答:
まずはFlexboxのプロパティ12種類を覚えることです。何も見ずに記述できるようになる必要はありませんが、どのようなプロパティがあって、どのような動きをするのかくらいは覚えたほうがよいでしょう。
動きの確認は、神戸ITフェスティバルで使用したスライドにも掲載しているので、そちらでも確認いただけます。
http://shared-blog.kddi-web.com/sandbox/flexbox-s/#/22(23 – 31ページ)
12種類あるプロパティを覚えたら、どのような場所で活用できるか実際のサンプルとソースコードを見ることです。ソースコードのサンプルは「Flexbox Patterns」などが参考になります。
http://www.flexboxpatterns.com/home
Flexboxを実案件で取り入れる場合の注意点はありますか(対応ブラウザについて)。
回答:
Flexboxが対応するブラウザを事前に確認し、取り決めを作っておくことをお薦めします。モジュールのブラウザサポートをまとめて確認できる”Can I use”を使うと非常に便利です。こちらを参考にすると、Flexboxの対応ブラウザは、IE10以降、Android4.3以降、iOS8.4以降と取り決めできます。詳しくはCan I useを参照ください。
http://caniuse.com/#search=flexbox
https://github.com/jonathantneal/flexibility
参考例として、私が運営しているCPIスタッフブログの場合、Flexboxが対応していないユーザーのアクセスは、2016年12月現在で1%でした。1,000人アクセスがあった場合、10人がレイアウト崩れを起こすことになります。Flexboxを使わずに多くの工数をかけて(昔の手法で)、この10人のためにレイアウト組みをするかどうかは企業の考え方次第ですので、必ず事前に確認をしましょう。
レイアウトが崩れても文字が読めれば良いという程度であれば、レイアウト全体に使うのではなく、パーツごとの利用などにも使えます。
以上Flexboxの紹介でした。
Flexboxを一度使うと、CSSで用意されているfloatsやclearfixを使ったレイアウト構築が、非常に面倒に感じてしまうことでしょう。今後、制作の現場でも多く使われていくようになりますので、今の内から使えるようにしておくと良いと思います。
また、私が運営しているCPIスタッフブログにもFlexboxの記事がいくつかありますので、合わせてよろしくお願いいたします。
●神戸ITフェスティバルで使用したスライド
「「Good bye ~~ floats and “clearfix” hacks」これからはFlexboxの時代」
URL:http://shared-blog.kddi-web.com/sandbox/flexbox-s
●CPIスタッフブログFlexbox関連記事
URL:http://shared-blog.kddi-web.com/tag/43
[筆者プロフィール]
阿部 正幸(あべ まさゆき) | KDDIウェブコミュニケーションズ/エバンジェリスト
システム開発会社で大規模なシステム開発を経験後、Web制作会社でプログラマー兼ディレクターとして従事。その後、KDDIウェブコミュニケーションズに入社、レンタルサーバーCPIのプロダクトマネージャーに就任。ACE01、SmartReleaseをリリース後、現職の「エバンジェリスト」としてWeb制作に関する様々なイベントに登壇。Drupal(g.d.o Japan)日本コミュニティー、HTML5 funなどに所属し、OSSを世に広げる活動やWeb制作に関する情報を発信している。