CSS 参考マニュアル

CSS @ルール(RULES)

flex CSSプロパティはエラストシックな長さの要素を指定するためのものです。それは同時に設定するために使用されます。flex-grow、flex-shrinkとflex-basis属性のショートカット属性。

以下の表は、この属性の使用方法とバージョン履歴、およびJavaScriptスクリプトでの使用方法を示しています。

デフォルト値：	0 1 auto; すべての属性を表示
適用：	エラストイック要素
継承：	ありません
アニメーション可能：	はい、速記の各属性はアニメーション可能です。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの構文：	object.style.flex="1"

この属性の構文は以下の通りです：

flex:　[　flex-grow　flex-shrink　flex-basis　]　|　none　|　auto　|　initial　|　inherit

以下の例では、flex属性の使用方法を示しています。

例

.flex-container　{
　　　　-webkit-flex:　1;　/*　Safari　6。1+　*/
　　　　　　　　-ms-flex:　1;　/*　IE　10　*/
　　　　　　　　　　　　flex:　1;　
}

以下の表は、この属性の値を説明しています。

値	説明
flex-grow	エラストイック要素のエラストイシティの拡大係数またはポジティブエラストイシティを指定します。
flex-shrink	エラストイック要素のエラストイシティの縮小係数またはネガティブエラストイシティを指定します。
flex-basis	エラストイック要素の初期サイズを指定します。
none	flexを0 0 autoに設定するに相当します。
auto	flexをautoに設定するに相当します。1 1 auto。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のflexの属性値を使用します。

flex属性のブラウザの互換性について、以下の表の数字はこの属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox 18+ ^-moz-、28 Google Chrome 21+ ^-webkit-、29 Internet Explorer 10+ ^-ms-、11 Apple Safari 6。1+ ^-webkit- Opera 12。1+

以下のチュートリアルを参照してください：CSS3多列レイアウト。