CSS Flexboxの使い方｜横並び・gap・flex:1の基本

CSS Flexboxの使い方とは

Flexbox（フレキシブルボックス）は、1方向（横または縦）の並びを扱うレイアウト機能です。親に display: flex を書くだけで、子要素が横に並び、余った幅の分配、間隔、揃えを簡単に指定できます。ナビゲーション、カードの並び、フォームの横並びに向いています。段組みのように縦横の両方を決めたい場合は、CSS Grid が適しています。

基本（構文・仕組み）

Flexbox は2つの軸で考えます。

• 主軸（main axis）: flex-direction で決まる並びの方向（初期値は row＝横）。
• 交差軸（cross axis）: 主軸と直角の方向。

flex: 1 は「余りを均等に分け合う」指定です。margin-left: auto を付けた子は、残りの余白をすべて受け取るため、ロゴは左、メニューは右という配置が簡単に作れます。

.row { display: flex; gap: 16px; }
.row > div { flex: 1; }

.nav { display: flex; }
.nav .push { margin-left: auto; }

サンプルコード（実行結果つき）

<style>
.row { display: flex; gap: 16px; width: 600px; }
.row > div { background: #9cf; padding: 8px; }
.f1 > div { flex: 1; }
.f2 > .a { flex: 2; } .f2 > div { flex: 1; }
.wrap { flex-wrap: wrap; }
.wrap > div { flex: 0 0 calc(50% - 8px); }  /* 2列にしたい */
</style>
<div class="row f1"><div>A</div><div>B</div><div>C</div></div>
<div class="row f2"><div class="a">A</div><div>B</div><div>C</div></div>
<div class="row wrap"><div>1</div><div>2</div><div>3</div><div>4</div></div>

動作確認（検証環境と結果）

• 環境: Windows 11 / Microsoft Edge 154（Chromium系、headless）/ render.ps1 + getBoundingClientRect()、画面も目視
• ファイル: C:Tempks2techtestst2flexbox.html、flexbox-fixed.html

折り返しの例は、padding が flex-basis に足されて幅が308pxになり、1行に収まらなかった失敗例です。box-sizing を入れると意図どおりになりました。

CSS Flexboxの使い方の注意点

• flex-wrap: nowrap（初期値）では、子は折り返さず縮みます。長い文字列や画像で、はみ出すことがあります。
• 子の min-width は、初期値が auto のため、長い単語で縮まらないことがあります。min-width: 0 で解消する場合があります。
• gap は Flexbox でも使えますが、古いブラウザの対応は can I use で確認してください。
• justify-content は主軸、align-items は交差軸です。flex-direction: column では逆になります。

CSS Flexboxの使い方でよくあるミス

• 子ではなく孫に flex を書いてしまい、効かない（display: flex は直接の子にだけ効く）。
• width と flex を両方書いて、どちらが効くか分からなくなる。
• 折り返しの計算で、padding や gap を考えていない。
• 縦中央寄せで、親に高さが無く、効いていないように見える。

ブラウザ対応・バージョン

Flexbox は主要ブラウザで広く使えます。ベンダープレフィックスは、現在の対象ブラウザでは通常不要です。Flexbox の gap の対応は、can I use で確認してください。float での段組みとの違いは 昔とは違う！今時のHTML・CSS設計方法2016 も参考になります。

CSS Flexboxの使い方のチェックリスト

• 並べたい要素の「親」に display: flex を書いたか。
• 主軸と交差軸を、flex-direction と合わせて確認したか。
• 折り返す場合は flex-wrap: wrap、幅は gap と box-sizing を考えて決めたか。
• 幅390pxと1200pxで確認したか。

CSS Flexboxの使い方のFAQ（よくある質問）

Q. FlexboxとGridはどちらを使えばよいですか？
A. 1方向の並びは Flexbox、行と列の両方を決めたいときは Grid、という使い分けが一般的です。

Q. flex: 1 は何を意味しますか？
A. 一般に flex: 1 1 0% として扱われ、余った幅を等分して取ります。

Q. 中央寄せができません。
A. 親の高さがあるか、align-items: center が書かれているかを確認します。CSS中央寄せ を参照してください。

CSS Flexboxの使い方の関連項目

• CSS Grid
• CSS中央寄せ
• box-sizing
• position: sticky
• 昔とは違う！今時のHTML・CSS設計方法2016