CSS flex 属性

定義と用法

flexは以下の属性のショートカット属性です：

flexはエラストイック・アイテムのエラストイック・レングスを設定します。

注釈：要素がエラストイック・アイテムでない場合、flex属性は無効です。

参照してください：

チュートリアル： CSSエラストイックフレックスボックス

参照：CSS flex-basis 属性

参照：CSS flex-direction 属性

参照：CSS flex-flow 属性

参照：CSS flex-grow 属性

参照：CSS flex-shrink 属性

参照：CSS flex-wrap 属性

参照：HTML DOM flex属性

例

コンテンツに関係なく、すべてのエラストイック要素の長さを同じにします：

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

自分で試してみる

CSS文法

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 0 autoと同等です。以下を参照してください： initial。
none 0 0 autoと同等です。
inherit 親要素からこの属性を継承します。以下を参照してください： inherit。

技術的詳細

デフォルト値： 0 1 auto
継承： いいえ
アニメーション作成： サポートされています。別の属性を確認してください。以下を参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript文法： object.style.flex="1"

さらに例

flexとメディアクエリを組み合わせて、異なるスクリーンサイズ/デバイス用の異なるレイアウトを作成します：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* レスポンシブレイアウト - 2列レイアウト（50％）ではなく、1列レイアウト（100％）を作成します */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

自分で試してみる

ブラウザのサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザバージョンが記載されています。

数字には、-webkit-、-ms-、または-moz-プレフィックスを使用する最初のバージョンが使用されていることを示しています。

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0