Flex Basis（flex-basis）プロパティ

最終更新：2026-09-13

flex-basis Flex Basis（flex-basis）プロパティ

flex-basis プロパティは、残りの空間が分配される前のフレックスアイテムの初期主軸サイズ、つまりアイテムの「理想のサイズ」を設定します。初期値は auto で、アイテムのサイズはコンテンツまたは設定された width/height から決まります。具体的な長さを指定した場合、アイテムはそのサイズから始まり、その後 flex-grow と flex-shrink に応じて伸縮します。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

flex-basis: auto | content | <length> | <percentage>;

⚙️ 値

値	タイプ	説明
`auto \| content`	キーワード	auto または content で決定
`<length> \| <percentage>`	タイプ	固定のベースサイズ

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
flex-basis	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

ヒント： flex-basis が 0 の場合、すべてのアイテムはベースサイズ 0 から始まり、空間全体が flex-grow だけで分配されます。これは等幅列レイアウトの標準的な手法です。

重要： flex-basis は width/height より優先度が高いですが、max-width/max-height や min-width/min-height よりは低いです。flex-basis と width の両方が設定された場合は、flex-basis が優先されます。

❓ よくある質問

Qflex-basis と width の違いは何ですか？

Aフレックスレイアウトでは flex-basis は width より優先度が高いです。flex-basis は主軸上のアイテムの初期サイズを決め、伸縮の計算に参加しますが、width は flex-basis が auto の場合にのみ適用されます。また flex-basis はベースサイズを flex-grow と flex-shrink に渡しますが、単なる width はそれを行いません。フレックスアイテムのベースサイズは flex-basis で定義し、width はフレックス以外の文脈に残すことをお勧めします。

Qflex-basis: auto と flex-basis: content の違いは何ですか？

Aauto はアイテムのサイズをコンテンツまたは明示的な width/height のいずれかから決めます。content は width/height の設定を無視し、純粋にコンテンツから決めます。content キーワードはブラウザーの対応が弱く、アイテムにテキストがない場合や置換コンテンツを含む場合に挙動が変わることがあるため、実際のプロジェクトでは auto を推奨します。その挙動でほとんどの状況に十分です。auto では表現できないコンテンツベースのサイズが本当に必要な場合は、まず対象ブラウザーで content キーワードをテストしてください。

Qflex-basis: 0 と flex-basis: auto の違いは何ですか？

Aflex-basis: auto はコンテンツや width をベースサイズとして使うため、コンテンツが異なるアイテムは異なる幅から始まり、残りの空間だけが flex-grow で共有されます。flex-basis: 0 はベース幅を 0 にするため、空間全体が比例分配され、列は厳密に等しくなります。flex: 1 は 1 1 0% に、flex: auto は 1 1 auto に展開され、両者は非常に異なる挙動を示します。