📏
【保存版】Flexboxの「横幅が広がらない問題」完全解説！
【保存版】Flexboxの「横幅が広がらない問題」完全解説！
こんにちは、新人Webコーダーのsakuです。
今回は実務で何度も悩まされる「Flexboxなのに横幅が広がらない」問題について、原因・対処法・チートシートまでまとめました。
🧠 よくある状況
例えば、フォームとボタンを縦に並べた以下のようなレイアウトを組んだとします。
まずは実際に動くデモで問題を確認してみましょう：
👆 上下の違いを比較してください！
コード例
<div class="p-flex-column">
<div class="form-item">
<input type="text" placeholder="キーワード検索">
</div>
<button class="form-button">検索</button>
</div>
.p-flex-column {
display: flex;
flex-direction: column;
gap: 8px;
}
親に .p-flex-column クラスをつけて flex-direction: column を指定しているにもかかわらず、子要素が親の横幅に広がってくれないという現象が発生します。
💥 問題
意図：
- 入力欄とボタンを 縦に並べ
- 各要素は 横いっぱいに広がってほしい
しかし実際の表示では、以下のように子要素が中央に小さく寄ってしまいます。
+–––––––––––––––––––––––+
| [ input ] [ボタン] |
+–––––––––––––––––––––––+
✅ 原因
Flexbox の交差軸の仕様が関係しています。
-
flex-direction: columnの場合：- 主軸（main axis）→ 縦方向
- 交差軸（cross axis）→ 横方向（※ここ重要）
📐 主軸と交差軸の関係
flex-direction: row （横並び）
──────────────────────────────
主軸 → → → （横方向）
交差軸 ↓ ↓ ↓ （縦方向）
flex-direction: column （縦並び）
──────────────────────────────
主軸 ↓ ↓ ↓ （縦方向）
交差軸 → → → （横方向）← ここに注意！
このとき、親に align-items: stretch（初期値）が指定されていても…
子要素の
widthがautoのままだと、内容の幅に縮こまってしまう！
つまり、「stretchしてもいいけど、何を基準に伸びるのか」が必要なのです。
🎯 解決方法
子要素に 明示的に width: 100% を指定すればOKです。
.form-item,
.form-button {
width: 100%;
}
これにより、子要素は親の幅いっぱいに伸びるようになります。
📊 チートシート：方向別指定まとめ
| やりたいこと | flex-direction | 必要な指定 |
|---|---|---|
| 横幅を広げたい | column |
width: 100% を子に指定 |
| 高さを揃えたい | row |
align-self: stretch または height: 100%
|
| 全体に同じ揃え方をしたい | どちらでも | 親に align-items を設定 |
🔍 補足：align-items と align-self の違い
-
align-items：親要素がすべての子要素に一括で揃え方を指示 -
align-self：子要素が自分自身だけに対して揃え方を指示
たとえば、親が align-items: center にしていても、ある子だけ align-self: stretch とすれば、それだけ縦に伸ばすこともできます。
🧪 実例：縦並びフォームレイアウト
以下のように書けば、スマホ表示でも横幅いっぱいに要素が広がる縦レイアウトになります。
<div class="p-flex-column">
<div class="form-item">
<input type="text" placeholder="キーワード検索">
<i class="icon-search"></i>
</div>
<button class="form-button">検索</button>
</div>
.form-item {
position: relative;
width: 100%;
}
.form-item input {
width: 100%;
padding-right: 2em;
}
.form-item .icon-search {
position: absolute;
right: 0.5em;
top: 50%;
transform: translateY(-50%);
}
✍️ まとめ
-
flex-direction: columnの場合、子要素の横幅は「交差軸」なので明示的な指定が必要 -
width: 100%を使うことで、親の幅に合わせて子が広がる -
align-itemsやalign-selfの意味と使い分けもセットで覚えておくと◎
💬 おわりに
この「横幅が広がらない」問題は、Flexboxの設計思想を理解すれば怖くありません。
TIPSとしてブックマークしつつ、次回からは悩まずに済むようにしておきましょう！
Discussion