🧩
flex: 1 1 auto を分解！意味と必要な場面を図解で解説
【完全理解】flex: 1 1 auto を分解してみたら、Flexboxの本質が見えた
こんにちは。新人Webコーダーのsakuです。今回はFlexboxの中でも特に「毎回コピペして使ってるけど、実は意味をわかっていない人が多い」
flex: 1 1 auto;
この指定について、完全に分解して理解してみましょう。
🤔 よくある悩み
-
flex: 1ってよく見るけど、なんとなく使ってるだけ - 最初の2つの
1 1って何？autoって幅のこと？ - これ使うとレイアウトがうまく並ぶ気がするけど、なぜ？
そんな方のために、「なぜそうなるのか」まで納得できるように、図解とともに丁寧に解説します！
🧪 flex の基本構造をおさらい
flex プロパティは、実は 省略形 です。
flex: 1 1 auto;
/* ↓ */
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
🧩 それぞれの意味を1つずつ解説
| 項目 | 値 | 意味 |
|---|---|---|
flex-grow |
1 |
余ったスペースを伸びて埋める力。1なら同率で分配される |
flex-shrink |
1 |
スペースが足りないときに縮む力。0なら縮まない |
flex-basis |
auto |
初期サイズの指定。auto なら内容サイズ or width/height に従う |
🔍 flex-grow: 1
- 親に空きスペースがあるとき、兄弟要素たちと "均等に" 伸びようとする
🔍 flex-shrink: 1
- 逆に親が狭いとき、必要に応じて縮む（0なら縮まない）
🔍 flex-basis: auto
- 初期サイズが要素の内容やwidthで決まる。
0だと最初からゼロ扱いになる
🧮 図で見る flex: 1 1 auto;
親: 横幅600px、子要素が3つ、すべて flex: 1 1 auto; の場合：
-
flex-basis: auto→ 最初はそれぞれのwidthや内容で幅が決まる -
flex-grow: 1→ 空きスペースが出たら、3つで均等に分けて広がる
【初期状態】flex-basis: autoで内容に応じた幅
┌────────────────────────────────────┐
│ [子1:100px] [子2:150px] [子3:80px] │ ← 残り270px
└────────────────────────────────────┘
親の幅: 600px
【flex-grow: 1が適用】余ったスペースを均等分配
┌────────────────────────────────────┐
│ [子1:190px] [子2:240px] [子3:170px] │ ← 各+90px
└────────────────────────────────────┘
それぞれ内容+90pxで600pxにフィット
💡 なぜ flex: 1 1 auto; をよく使うの？
これは以下のようなニーズをバランスよく満たしてくれる指定です：
- 初期サイズはコンテンツに合わせたい
- でも余ったら広がってほしい
- 狭くなったら縮んでもいい
✅ こんな場面で活躍！
📦 カードを3列で横並びに
.card {
flex: 1 1 auto;
min-width: 200px;
}
→ 中身に応じた初期幅 + 余白で拡張、狭ければ縮む！
🔍 入力欄とボタンの横並び
.input {
flex: 1 1 auto; /* 入力欄はできるだけ広く */
}
.button {
flex: 0 0 auto; /* ボタンは固定サイズ */
}
→ 実用性バツグンの組み合わせです！
🧵 よく使うflex値まとめチートシート
| 書き方 | 説明 | よく使う場面 |
|---|---|---|
flex: 1 1 auto; |
基本のバランス型 | レスポンシブな横並び全般 |
flex: 1 0 0; |
初期サイズゼロ、等分に広がる | グリッド的に等分割したいとき |
flex: 0 0 auto; |
コンテンツサイズ固定 | アイコン、ボタンなど |
✍️ まとめ
-
flex: 1 1 auto;はgrow,shrink,basisの略 - 内容に応じた幅で始まり、余白があれば伸び、狭ければ縮む
- 「何も考えずに書く」のではなく、意図して使い分けるのが重要
Discussion