フレキシブル・レイアウトの基本 Flexible Layout

フレキシブル レイアウトとは

ブラウザ(ブラウズ表示領域)の幅に応じてコンテンツのレイアウト(幅)を可変して構築する方法の一つです。

例えば、今まではfloatプロパティやclearを使用してレイアウトを構築する方法がありますが、CSS3のフレキシブルボックスを用いることで、これらを行わなくても簡単に構築することができるようになります。

仕様

【ブラウザ】

  • ※ 対応しているブラウザであっても、その仕様のすべてのプロパティが使用できるわけではありません。
  2012~現在
(flex)
2011
(flexbox)
2009
(box)
IE 11~ 10(-ms-) 10(-ms-)
Firefox 22~ Unknown 2~(-ms-)
Chrome 21~
(21~28:-webkit-)
Unknown 4~(-webkit-)
Safari 6.1~(-webkit-) Unknown 3.1~(-webkit-)
Opera 12.1~
(15:-webkit-)
Unknown -
iOS 7~(-webkit-) Unknown 3.2~(-webkit-)
Android 4.4~ Unknown 2.1~(-webkit-)
Opera Mobile - Unknown -
Chrome for Android 35?~(-webkit-) Unknown -

【プロパティ】

2012~現在
(flex)
2011
(flexbox)
2009
(box)
display:flex/inline-flex display:flexbox/inline-flexbox display:box/inline-box
flex - box-flex
flex-grow - box-flex-group
flex-shrink - -
flex-basis - -
- flex-flow -
flex-wrap - box-lines
flex-direction - box-direction
box-orient
justify-content flex-pack box-pack
align-items flex-align box-align
align-self - -
align-content flex-line-pack -
order flex-order box-ordinal-group

構造

Flexを使用するには、Flexコンテナー(親要素)とFlexアイテム(子要素)が必要で、Flexコンテナーとして定義したものは、そのFlexコンテナーの子要素は自動的にFlexアイテムとして定義されます。

Flex Container

  • Flex Item
  • Flex Item
  • Flex Item

基本構築

Flexコンテナーにdisplayプロパティの値としてflexまたはinline-flex(旧仕様はflexboxまたはbox)を設定します。
ただし、対応しているブラウザでも一部古いバージョンでは、旧仕様(異なるプロパティや値)で実装していることがあるため、ベンダープレフィックスの指定が必要だったり、指定方法自体が異なる場合があります。

なお、flexはブロックレベルの要素として、inline-flexはインラインレベルの要素として定義されます。

サンプル

item 1

item 2

item 3

item 4

item 5

item 6

item 7

【HTML】

【CSS】

現状は多くのブラウザに対応させるためにベンダープレフィックスを付けた指定も必要ですが、今後対応しているすべてのブラウザが統一されれば、display:flex;一つのみの指定で、適用されることになります。

一部要素ではflex系のプロパティは使えない

一部のブラウザで次の要素はFlex関連のプロパティが使えないことがあります。

  • button要素
  • fieldset要素
  • legend要素

例えばfieldset要素ではChromeでdisplay:flex;が効かなかったりします。

CSS3逆引きリファレンス一覧へ戻る