フレキシブル・レイアウトの基本 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;が効かなかったりします。