flex内で全ての子要素のwidthを同じにする

Prompt

flexにて、子要素の大きさに関わらず全ての子要素のwidthを同じにするには？

Flexboxで子要素のコンテンツの大きさに関わらず、すべての子要素の幅を均等にしたいんだね！これはCSS Flexboxの設計思想を最も活用できる、定番のテクニックだよ。🚀

---

🔑 解決策：flex-grow と flex-basis

すべてのFlexアイテム（子要素）の幅を均等にするには、子要素に以下のCSSプロパティを設定するのが最もシンプルかつ確実な方法だよ。

CSS

.flex-item {
    flex-grow: 1; /* 👈 余白を均等に埋める */
    flex-basis: 0; /* 👈 初期幅をゼロと見なす */
}

この2つのプロパティ、またはその短縮形である flex: 1; を設定することで、子要素の幅を均等にできるんだ。

1. flex: 1; の魔法

短縮形の flex: 1; は、以下と同じ意味だよ。

CSS

flex: 1 1 0;
/* flex-grow: 1 */
/* flex-shrink: 1 */
/* flex-basis: 0 */

A. flex-grow: 1 の役割

これは、Flexコンテナ内に残った余白を、子要素にどれだけ分配するかを指定するプロパティだよ。

• 1 を設定すると、すべての子要素が同じ比率（1:1:1:1…）で余白を分け合うため、最終的な幅が均等になるんだ。

B. flex-basis: 0 の役割

これは、Flexアイテムの初期幅を定義するプロパティだよ。

• 0 を設定すると、Flexboxは子要素の初期幅をゼロから計算し始める。

• もしこの値が auto や content のままだと、Flexboxはまずコンテンツの幅（例: テキストの長さ）を考慮に入れ、その後に余白を分配するから、最終的な幅は不均等になる可能性があるんだ。

• flex-basis: 0; にすることで、コンテンツの幅は無視され、余白が純粋に均等に分配されるようになるよ。

---

🛠️ flex: 1; の適用例

例えば、ヘッダーに3つのナビゲーションリンクを均等な幅で並べたい場合はこうなるよ。

HTML

<div class="nav-container">
    <div class="nav-item">短いテキスト</div>
    <div class="nav-item">とても長いナビゲーションリンク</div>
    <div class="nav-item">ミドル</div>
</div>

CSS

.nav-container {
    display: flex;
    width: 600px; /* 親の幅 */
}

.nav-item {
    /* これだけで全ての子要素の幅が 200px (600px / 3) になる */
    flex: 1; 
    text-align: center;
}

このように、flex: 1; を設定するだけで、子要素が持つコンテンツの長さ（短いテキスト、長いリンク）に関わらず、均等な幅を強制できるんだ。これはFlexboxを使いこなす上で必須のテクニックだよ！😊