flex-basisとは何かを基礎から実例まで徹底解説

折原 慧ウェブデザインデイ 編集ライター

Flexboxでレイアウトを組んでいると、「なぜかアイテムの幅が思い通りにならない」という壁にぶつかることがあります。その原因の多くはflex-basisという一つのプロパティにあります。個人的にコーディングを続けてきた中で気づいたのは、flex-basisを正しく理解すると、レスポンシブなレイアウトの悩みが驚くほどスッキリ解決するということです。

このプロパティは一見するとwidthと同じように見えますが、実は根本的な考え方が異なります。ここを曖昧にしたままだと、いつまでも「なんとなく動く」レベルから抜け出せません。

flex-basisとは何か

flex-basisとは、簡単に言えばFlexアイテムが伸び縮みする前の「初期サイズ」を決めるプロパティです。

Flexboxでは、コンテナの中で余った空間をflex-growで分け合ったり、足りない空間をflex-shrinkで削り合ったりします。その計算の出発点となる基準サイズがflex-basisです。

もう少し正確に説明すると、flex-basisはアイテムの主軸（main axis）方向のサイズを指定します。この「主軸」がどちらを向くかは、後述するflex-directionによって変わります。

基本的な性質を整理しておきましょう。

flex-basisの書き方と値の種類

基本的な構文はとてもシンプルです。

.item {
  flex-basis: auto | content | <length> | <percentage>;
}

それぞれの値がどう振る舞うのかを、一つずつ見ていきましょう。

auto（初期値）

もっとも標準的な値です。autoが指定されると、ブラウザはまず主軸方向のサイズ指定（widthやheight）があるかどうかを探します。

横並び（row）ならwidthを、縦並び（column）ならheightを参照します。もしそれらが指定されていなければ、最終的に中身のコンテンツサイズを基準にします。

content

これは「アイテムの中身の量に合わせてサイズを決める」という値です。たとえwidthが設定されていても、それを無視して中身の自然なサイズ（intrinsic size）を基準にします。

中身にぴったり合わせたいときに便利ですが、実務ではautoほど頻繁には使いません。

数値やパーセント指定（200px、50%など）

もっとも直感的な使い方です。flex-basis: 200px;のように書くと、そのアイテムの初期サイズが200pxになります。

ただし注意したいのは、これはあくまで初期値であって最終サイズの保証ではないという点です。最終的なサイズは、コンテナの余白とflex-growやflex-shrinkの設定次第で変化します。

0（ゼロ指定）という特別なパターン

実は、このflex-basis: 0という指定が非常に強力です。

0を指定すると、ブラウザはアイテムの中身のサイズを初期計算で完全に無視します。そのため、後述する等幅カラムを作るときの定番テクニックになります。

flex-directionとの深い関係

flex-basisを理解するうえで絶対に外せないのが、flex-directionとの関係です。

flex-basisが決めるのは「主軸方向のサイズ」ですが、主軸の向きはflex-directionで変わります。

つまり同じflex-basis: 200px;でも、横並びなら「幅200px」、縦並びなら「高さ200px」を意味するのです。ここを知らないと「なぜ高さが変わるの?」と混乱してしまいます。

flex-grow・flex-shrinkとの連携

flex-basisは単独ではなく、flex-growとflex-shrinkとセットで力を発揮します。この三つの関係を、動作の順番で整理してみましょう。

この流れを踏まえると、次の定番パターンの意味がよく分かります。

.item {
  flex-grow: 1;
  flex-basis: 0;
}

flex-basis: 0で中身のサイズを無視し、flex-grow: 1で余白を均等に分け合う。この組み合わせによって、中身の量に関係なく完全な等幅カラムが作れます。ナビゲーションや料金プランの比較表などで大活躍するテクニックです。

flex-basisとwidthの違い

ここが多くの人がつまずくポイントです。「200pxにしたいなら、widthでもflex-basisでも同じでは?」という疑問への答えを整理します。

優先順位のルール

結論から言うと、widthとflex-basisを両方指定すると、flex-basisが優先されます。

.item {
  width: 100px;
  flex-basis: 300px;  /* こちらが採用される */
}

この場合、実際に使われる主軸サイズは300pxです。ただしmin-widthやmax-widthによる制約があると、そちらが優先される場合もあるので注意しましょう。

指定がないときの挙動

flex-basisを省略した場合は、まずwidthの値が参照されます。widthもなければ、最終的に中身のコンテンツ幅が使われます。この段階的なフォールバックが、autoの正体でもあります。

widthが「絶対的な幅の宣言」であるのに対し、flex-basisは「あくまで出発点であり、周囲の状況で変化しうる柔軟なサイズ」だと捉えると理解しやすくなります。CSSアニメーションと組み合わせて要素を動的に変化させたい場合も、CSSアニメーションの実装とレイアウトの相性を意識するとスムーズです。

よくある質問

flex-basisとwidthはどちらを使うべきですか

Flexアイテムのサイズを管理する場合は、flex-basisの使用をおすすめします。Flexboxの計算ロジックに沿った柔軟な挙動が得られるためです。一方でFlexコンテキストの外にある要素なら、素直にwidthを使うのが自然です。

flex-basisにマイナス値は使えますか

使えません。マイナス値は無効な指定として扱われ、ブラウザに無視されます。サイズを小さくしたい場合は、flex-shrinkで縮小の割合を調整するのが正しいアプローチです。

flex-basis: 0 と flex-basis: 0% は同じですか

ほとんどの場面で同じ結果になりますが、厳密には挙動が異なるケースがあります。特にコンテナのサイズが不定な場合は差が出ることがあるため、迷ったら0を使う方が予測しやすく安全です。

flexショートハンドの中でflex-basisはどう書きますか

flex: 1 1 200px;のように、三番目の値がflex-basisにあたります。順番はflex-grow、flex-shrink、flex-basisです。実務ではflex: 1;のような省略形もよく使いますが、この場合flex-basisは0扱いになる点を覚えておくと混乱しません。

パーセント指定が効かないのはなぜですか

パーセントはコンテナの主軸サイズを基準に計算されます。もしコンテナのサイズが確定していない（内容依存になっている）と、パーセント指定が意図通りに解決されず、中身のサイズにフォールバックすることがあります。まずは親要素にサイズが確定しているかを確認してみてください。

まとめ

flex-basisは、Flexアイテムの「伸縮する前の初期サイズ」を決める、レイアウトの土台となるプロパティです。

ポイントを振り返ると、まずflex-directionによって主軸の向きが変わること。次にflex-grow・flex-shrinkと連携して最終サイズが決まること。そしてwidthとは役割が異なり、指定時はflex-basisが優先されることです。

特にflex-basis: 0とflex-grow: 1の組み合わせは、実務で繰り返し使う強力なパターンなので、ぜひ手を動かして試してみてください。小さなコードで挙動を確認する経験を重ねるうちに、Flexboxのレイアウトが「なんとなく」から「意図通り」へと変わっていくはずです。