flex (grow/shrink/basis)

レイアウト・配置

フレックスアイテムの伸縮性と基本サイズを制御するプロパティです。flex-grow（余白の配分比率）、flex-shrink（縮小比率）、flex-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+, 全モダンブラウザ