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

2024.06.17

※当ブログのリンクには一部広告が含まれています。

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を使った実際のサイトの作り方は、以下の記事でまとめています。

【この記事を書いた人】

Adobe使用歴20年以上、Webデザイナー歴15年以上、フリーランス歴10年以上のApple/運動好きな2児の母。Apple/クリエイティブ/運動/ライフスタイル関係の情報を発信中。プロフィール詳細

Flexboxのメリット
Flexboxのデメリット
Flexboxの対応ブラウザ
Flexboxの仕様
Flexboxのプロパティ一覧
Flexコンテナ(親要素)に指定できるプロパティ
flexアイテム(子要素)に指定できるプロパティ
ベンダープレフィックスで旧ブラウザに対応する
Web制作をより深く学びたい人へ

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
flex-direction
justify-content
align-items
flex-wrap
align-content
flex-flow

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

order
align-self
flex-grow
flex-shrink
flex-basis
flex

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-flow	flex-direction flex-wrap 例：flex-flow: row wrap;

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

プロパティ	値	説明
order	→ アイテムの表示順序を変える。視覚的に変えるだけで、HTMLの構造は変わらない。
order	number	0が初期値 [例] .item1{ order: 1; } .item2{ order: -1; }
align-self	→ アイテムの配置をalign-itemsより優先度を上げて上書きする。アイテム個々に設定することができる。
align-self	auto	align-itemsの値を元に計算する。その他の値はalign-itemsと同じ。
flex-grow	→ Flexコンテナ内にスペースがある場合に、コンテナ内で各アイテムの拡大率を設定。他のアイテムと比べてどのくらい拡大するかを指定。
flex-grow	number	初期値は0。負の値は無効 [例] .item1{ flex-grow: 1; } .item2{ flex-grow: 2; }
flex-shrink	→ アイテムがコンテナ内に入りきらないときに、コンテナ内で各アイテムの縮小率を設定。他のアイテムと比べてどのくらい縮小するかを指定。
flex-shrink	number	初期値は1。負の値は無効 [例] .item1{ flex-shrink: 1; } .item2{ flex-shrink: 2; }
flex-basis	→ アイテムのベースとなる幅の値。この値を元に、flex-glowやflex-shrinkの拡大・縮小率を計算する。
	auto	（初期値）元々のアイテムのサイズが適用。
	‘width’	pxなどの絶対値や、親要素に対する%でも指定可能。 [例] .item1{ flex-basis: 100px; } .item2{ flex-basisk: 10em; }
flex	→ flex-grow、flex-shrink、flex-basisのショートハンド
	numberなど	初期値は、 flex-grow: 0 flex-shrink: 1 flex-basis: auto 単位がない数値を1つ指定した場合→flex-grow 幅または高さを1つ指定した場合→flex-basis 値を2つ指定した場合：単位(pxやemなど)が付いているものと付いていないものの組み合わせ→flex-grow \| flex-basis 単位がない数値の組み合わせ→flex-grow \| flex-shrink
	none	0 0 auto

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

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

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デザインを学べるオンラインスクール・講座まとめ