[CSS3] flexboxの仕様とサンプル画像付きプロパティ一覧

 2017.05.31  2017.09.20

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

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

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の仕様

flexboxのプロパティ一覧

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

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

flexboxのプロパティ一覧

まだ完全に覚えきれていないflexboxのプロパティですが、迷った時すぐに参照できるように表でまとめました。

  1. display
  2. flex-direction
  3. justify-content
  4. align-items
  5. flex-wrap
  6. align-content
  7. flex-flow
  8. order
  9. align-self
  10. flex-grow
  11. flex-shrink
  12. flex-basis
  13. 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コンテナ内のアイテムの折り返し
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アイテム(子要素)に指定できるプロパティ

プロパティ 説明
order → アイテムの表示順序を変える。視覚的に変えるだけで、HTMLの構造は変わらない。
number 0が初期値
[例]
.item1{ order: 1; }
.item2{ order: -1; }
align-self → アイテムの配置をalign-itemsより優先度を上げて上書きする。アイテム個々に設定することができる。
auto align-itemsの値を元に計算する。その他の値はalign-itemsと同じ。
flex-grow → flexコンテナ内にスペースがある場合に、コンテナ内で各アイテムの拡大率を設定。他のアイテムと比べて
number 初期値は0。負の値は無効
[例]
.item1{ flex-grow: 1; }
.item2{ flex-grow: 2; }
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
Pocket