【図解】Flexboxの基本的な使い方とプロパティ一覧

Flexbox（CSS Flexible Box Layout）とは、様々なプロパティを使用して柔軟にレイアウトが組めるレイアウトモードのことです。CSSでレイアウトを組む場合、古いブラウザを考慮してfloatとclearfix(クリアフィックス)でレイアウトを組むことが多かったのですが、Flexboxを使えばより簡単にレイアウトすることが可能になります。

Flexboxはベンダープレフィックス付きでIE10から対応していますが、IE9/IE10を含むWindows Vista Service Pack 2の延長サポートが2017年4月11日に終了しているので、実務でも使いやすくなりそうです。

IE9とIE10を無視できる日まであと40日!これでCSS3も心置きなく実装できる!?

Flexboxを使った実際のサイトの作り方は、以下の記事でまとめています。

flexbox関連記事【サンプル付】Flexboxによる2カラムのレスポンシブサイトの作り方(横並びレイアウト)

flexbox関連記事【サンプル付】Flexboxを使ったシングルページのレスポンシブサイトの作り方

Flexboxのメリット

横並びや縦並び、要素同士の間隔や上下左右の位置をプロパティで簡単に指定できます。 あれほど苦労した「上下左右真ん中揃え」もいとも簡単に実現可能です。プロパティの種類が豊富なので、HTML 側のコードも減らせます。

Flexboxのデメリット

FlexboxはWindowsのIE8/IE9で未対応なのが気になるデメリットですが、既にVistaのサポートが終了しているので、個人的にはあまり気にしなくてもよいかなと思っています。 IE8やIE9対応させたい場合は、flexibilityというJava Scriptを使用すれば対応させることが可能です。

プロパティの種類が多いので、Flexboxの仕様をきちんと理解した上でスピードを上げるには少々時間がかかりそうなのがデメリットといいますか、頑張りどころかなと思います。

Flexboxの対応ブラウザ

IE8やIE9は未対応、IE10はベンダープレフィックス付き（-ms-）で対応、まだバグはあるようですがIE11も対応となっています。

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Flexboxの仕様

子要素を「Flexアイテム」、子要素を包括する親要素を「Flexコンテナ」と呼びます。

Flexboxを使えるようにするためには、親要素「Flexコンテナ」にdisplayプロパティを指定します。displayプロパティにflexかflex-inlineを指定すると、子要素が自動的に「Flexアイテム」になります。

Flexboxのプロパティ一覧

迷った時すぐに参照できるように、画像付きで表にまとめました。

Flexコンテナ(親要素)に指定できるプロパティ

プロパティ	値	説明
display	→ Flexboxを適用させるためにFlexコンテナ(親要素)に指定
	flex	ブロック要素
	inline-flex	インラインブロック要素
flex-direction	→ Flexアイテムを並べる向きを指定。横向きの水平方向か、縦向きの垂直方向の2種類。rowとrow-reverseは書字方向に影響されるので、ヘブライ語など書字方向が右から左に書く言語の場合（dir属性がrtl）、それぞれ逆になる。
	row	（初期値）横向き：左→右へ
	row-reverse	横向き：右→左へ
	column	縦向き：上→下へ
	column-reverse	縦向き：上→下へ
justify-content	→ 水平方向の子要素の揃え方
	space-between	最初と最後のアイテムは左右の端にくっつき、アイテム同士の間隔を均等に配置
	space-around	全てのアイテムの左右の間隔が均等
	center	flexコンテナの中央に配置(中央揃え)
	flex-start	flexコンテナの左側に詰めて配置(左揃え)
	flex-end	flexコンテナの右側に詰めて配置(右揃え)
	stretch	アイテムの合計サイズが配置コンテナーのサイズより小さい場合に、サイズが auto であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます
align-items	→ 垂直方向の子要素の揃え方
	stretch	（初期値）アイテムはFlexコンテナの高さいっぱいまで広がる
	center	中央揃え
	flex-start	左揃え
	flex-end	下揃え
	baseline	アイテム内のベースラインで揃える
flex-wrap	→ Flexコンテナ内のアイテムの折り返し。「box仕様」のブラウザ（chrome20/Safari6.0/iOS6.1 Safari/Android4.3など）では折り返し不可。
	nowrap	（初期値）折り返しなし。全てのアイテムがコンテナ内に1行におさまる。
	wrap	折り返しを設定する。
	wrap-reverse	wrapと逆で下から上へと折り返す。
align-content	→ flex-wrapでwrapを指定している複数行の場合の垂直方向(上下)の揃え方。justify-contentの垂直バージョン。
	stretch	（初期値）
	center	中央揃え
	flex-start	上揃え
	flex-end	下揃え
	space-between	最初と最後のアイテムは上下の端にくっつき、アイテムの間隔は均等に配置
	space-around	全てのアイテムの間隔を均等に配置
flex-flow	→ flex-directionとflex-wrapのショートハンド
	flex-direction flex-wrap 例：flex-flow: row wrap;

flexアイテム(子要素)に指定できるプロパティ

ベンダープレフィックスで旧ブラウザに対応する

旧ブラウザで動かすには、ベンダープレフィックスを付ける必要があります。どこまで対応すべきが悩むところですが、まだバグも多そうなのでとりあえず付けておいた方がよさそうです。

Flexboxの仕様は現在までに「box→flexbox→flex（現行）」と名前や内容を変えてきたのですが、それぞれの時期に使われていた古いブラウザは、古い仕様のみに対応していたり、プロパティや値の書き方が違っていたりします。（ややこしいですが…）下記のサンプルコードを見ていただくと、同じ内容のはずなのにプロパティ名や値が違うことが分かります。

現在のブラウザーシェア率を確認しつつ、対応ブラウザに合わせて各プロパティや値を確認し、必要なベンダープレフィックスを付けていく、といった作業が必要になりそうです。

/* display:flexの場合 */

display: -webkit-box; /*box仕様：旧Safari・Chrome・Android4.3以前*/
display: -moz-box;    /*box仕様：旧Firefox*/
display: -ms-flexbox; /*IE10*/
display: -webkit-flex; /*旧Safari・Chrome・Android*/
display: flex;　/*最新ブラウザ*/

/* display:inline-flexの場合 */

display: -webkit-inline-box; /*box仕様：旧Safari・Chrome・Android4.3以前*/
display: -moz-inline-box;    /*box仕様：旧Firefox*/
display: -ms-inline-flexbox; /*IE10*/
display: -webkit-inline-flex; /*旧Safari・Chrome・Android*/
display: inline-flex;　/*最新ブラウザ*/

/* align-itemsの場合 */

-webkit-box-align: start;
-moz-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;

/* justify-contentの場合 */

-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between; 

Web制作をより深く学びたい人へ

Web制作の知識をもっと深めたいと思っている人は、オンライン学習・スクールをまとめた以下の記事が役に立つかもしれません。無料で学べるサービスもありますので、チェックしてみてくださいね。

参考記事【無料あり】Webデザイナーが解説！自宅でWebデザインを学べるオンラインスクール・講座まとめ

• 前の記事
  Etsyのアクセス数を上げるSEO対策【検索キーワード編】
• 次の記事
  【サンプル付】Flexboxによる2カラムのレスポンシブサイトの作り方(横並びレイアウト)