flex-basis を理解すると「初期幅の戦略」が一気に上手くなる
flex-basis は Flexbox の中でも、「要素が最初にどれくらいの幅を取るか」を決めるプロパティです。
flex-grow や flex-shrink と組み合わせることで、カードレイアウト、3カラム、レスポンシブな横並びなどが思い通りに作れるようになります。
初心者がつまずきやすい「width と何が違うのか」「flex:1 の正体」「basis の戦略的使い方」まで丁寧に解説します。
flex-basis の基本
flex-basis は「Flexbox における width の優先版」
flex-basis: 200px;
と書くと、その要素は まず 200px を基準に幅を決めようとするようになります。
width と違うのは、
- Flexbox の計算に優先される
- grow や shrink と組み合わせて動的に変化する
という点です。
Tailwind では basis-* を使う
<div class="basis-48"> <!-- 12rem = 192px -->
任意値も使えます。
<div class="basis-[200px]">
flex-basis と width の違いを深掘り
width は「絶対的な幅」
flex-basis は「Flexbox の計算に使う初期幅」
例えば、横並びの3つの要素に width:200px を指定すると、
コンテナが狭くなったときに overflow しやすくなります。
一方、flex-basis:200px なら、
grow や shrink と組み合わせて柔軟に変化できます。
例1：カードを「最低幅 200px」で並べたい（レスポンシブカード）
CSS 版
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex-basis: 200px;
flex-grow: 1;
}
<div class="cards">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
</div>
Tailwind 版
<div class="flex flex-wrap gap-4">
<div class="basis-[200px] grow bg-gray-100 p-4 rounded">カード1</div>
<div class="basis-[200px] grow bg-gray-100 p-4 rounded">カード2</div>
<div class="basis-[200px] grow bg-gray-100 p-4 rounded">カード3</div>
</div>
ポイント
basis が「最小幅」、grow が「余った幅を広げる」役割を担当します。
例2：3カラムを「固定幅 + 可変幅 + 固定幅」にする
CSS 版
.layout {
display: flex;
}
.left {
flex-basis: 200px;
flex-shrink: 0;
}
.center {
flex-basis: 0;
flex-grow: 1;
}
.right {
flex-basis: 200px;
flex-shrink: 0;
}
Tailwind 版
<div class="flex">
<aside class="basis-[200px] shrink-0 bg-gray-200 p-4">左</aside>
<main class="basis-0 grow bg-white p-4">中央</main>
<aside class="basis-[200px] shrink-0 bg-gray-200 p-4">右</aside>
</div>
深掘りポイント
中央カラムの basis:0 は「初期幅ゼロで、grow に任せる」という意味。
これが「真ん中だけ可変幅」のレイアウトを作る最強パターンです。
例3：ボタンを均等幅にする（flex:1 の正体）
CSS 版
button {
flex: 1 1 0;
}
これは実は
- flex-grow: 1
- flex-shrink: 1
- flex-basis: 0
の省略形です。
Tailwind 版
<div class="flex gap-2">
<button class="flex-1 bg-blue-600 text-white p-2 rounded">OK</button>
<button class="flex-1 bg-gray-300 p-2 rounded">キャンセル</button>
</div>
深掘りポイント
basis:0 にすることで、
「余白を完全に均等に配分する」
という動きになります。
例4：画像とテキストの比率を決める（basis で比率指定）
CSS 版
.item {
display: flex;
}
.image {
flex-basis: 30%;
}
.text {
flex-basis: 70%;
}
Tailwind 版
<div class="flex">
<div class="basis-[30%] bg-gray-300 h-24"></div>
<div class="basis-[70%] p-4">テキスト部分</div>
</div>
basis は px だけでなく % も使えるため、
比率レイアウトにも向いています。
flex-basis の戦略的使い方（重要）
1. 「最小幅」を決めるときに使う
カードやボックスを並べるとき、
basis を「最小幅」として使うとレスポンシブに強くなります。
例：basis-[200px] grow
2. 「初期幅ゼロで均等に広げたい」なら basis:0
flex:1 の正体がこれです。
- basis:0
- grow:1
これで「余白を均等に配る」動きになります。
3. 「固定幅にしたい」なら basis + shrink-0
<div class="basis-[150px] shrink-0">
これで「絶対に縮まない固定幅」になります。
4. width より basis を優先して考える
Flexbox の中では width より basis が優先されます。
「Flexbox の中で width が効かない」と感じたら、
basis を疑うと解決が早いです。
実践テンプレート：よく使う flex-basis パターン
レスポンシブカードグリッド
<div class="flex flex-wrap gap-4">
<div class="basis-[240px] grow bg-white p-4 rounded shadow">カード1</div>
<div class="basis-[240px] grow bg-white p-4 rounded shadow">カード2</div>
<div class="basis-[240px] grow bg-white p-4 rounded shadow">カード3</div>
</div>
固定幅サイドバー + 可変メイン
<div class="flex min-h-screen">
<aside class="basis-[240px] shrink-0 bg-gray-800 text-white p-4">サイドバー</aside>
<main class="basis-0 grow p-6">メインコンテンツ</main>
</div>
均等幅ボタン
<div class="flex gap-2">
<button class="flex-1 bg-blue-600 text-white p-2 rounded">OK</button>
<button class="flex-1 bg-gray-300 p-2 rounded">キャンセル</button>
</div>
まとめ
flex-basis は Flexbox の中で「初期幅」を決める重要なプロパティです。
- basis は width より優先される
- basis + grow でレスポンシブカードが作れる
- basis:0 は「均等配分」の鍵
- basis + shrink-0 で「固定幅」になる
- % 指定で比率レイアウトも可能
Flexbox のレイアウトが難しく感じるとき、
basis を意識すると一気に理解が進みます。
