CSS flex プロパティ

すべてのフレキシブル・アイテムは、コンテンツに関係なく同じ長さになります：

#main div {
    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */
    flex: 1;
}

定義と用法

flex プロパティは、同じコンテナ内のフレキシブル・アイテムの残り部分を基準に項目の長さを指定します。

flex プロパティは、flex-grow、flex-shrink、flex-basisプロパティに対するショートハンド・プロパティです。

注: 要素がフレックスアイテムでない場合、flex プロパティの効果はありません。

デフォルト値：	0 1 auto
継承：	継承する
アニメーション可否：	yes, 個別のプロパティを参照してください. animatable を参照
バージョン：	CSS3
JavaScript 構文：	object.style.flex="1" Try it

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

-webkit-、-ms-、-moz- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。

プロパティ
flex	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

値	説明
flex-grow	数値は、他のフレックスアイテムに比べどれだけ引伸ばすかを指定します。
flex-shrink	数値は、他のフレックスアイテムに比べどれだけ縮小するかを指定します。
flex-basis	アイテムの長さです。正しい値："auto"、"inherit" または長さの単位 "%"、"px"、"em" などが後続する数値
auto	1 1 auto に同じ
initial	>0 1 auto に同じ。initial を参照
なし	0 0 auto に同じ
inherit	このプロパティは親要素を継承します。inherit を参照