flex (grow/shrink/basis)

レイアウト・配置

フレックスアイテムの伸縮性と基本サイズを制御するプロパティです。

構文

Syntax

flex: <flex-grow> <flex-shrink> <flex-basis>

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
}

実行結果

Sidebar (固定)

Main (可変)

固定サイドバーと可変メインコンテンツ

.card {
  flex: 1 1 300px;
}

実行結果

Card 1

Card 2

Card 3

最小300pxで均等に伸縮するカード

flex: none;

実行結果

固定要素

伸縮要素

伸縮しない（flex: 0 0 auto と同じ）

flex: 1は最も使用頻度が高い。レスポンシブデザインの基本。

IE11+, 全モダンブラウザ