CSS flexプロパティ

例

すべてのフレックスボックスオブジェクトの子要素に同じ長さを持たせ、それらの内部の内容を無視します：

#main div { flex:1; }

表内の数字は、そのプロパティをサポートする最初のブラウザのバージョン番号を示します。

-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 プロパティは、flex-grow、flex-shrink、flex-basis プロパティの略記プロパティです。

注意：要素がフレックスボックスオブジェクトの子要素でない場合、flex プロパティは機能しません。

初期値：	0 1 auto
継承：	否
アニメーション可能：	はい、個々のプロパティを参照。参照してください。アニメーション可能（animatable）。
バージョン：	CSS3
JavaScript 構文：	object.style.flex="1" 試してみる

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

值	説明
flex-grow	数値で、他のフレックスアイテムに対して項目が拡張する量を指定します。
flex-shrink	数値で、他のフレックスアイテムに対して項目が収縮する量を指定します。
flex-basis	項目の長さ。有効な値："auto"、"inherit"、または "%"、"px"、"em"、その他の長さの単位が後に続く数値。
auto	1 1 auto と同じです。
none	0 0 auto と同じです。
initial	このプロパティを初期値、つまり 0 1 auto に設定します。参照してください。initial。
inherit	親要素からこのプロパティを継承します。参照してください。inherit。

その他の拡張