Flexbox：フレックスコンテナ (Flex Container) とフレックスアイテム (Flex Items)

JPKODA 編集部 May 6, 2026

モダンなチュートリアルのFlexbox学習シリーズへようこそ。まずは最も重要なコアコンセプトであるフレックスコンテナ (Flex Container) と フレックスアイテム (Flex Items) から始めていきましょう。

これらは、あらゆるFlexboxレイアウトを構築するための土台となります。これまでのモジュールでHTMLの基本構造や要素のポジショニングを学んだように、ここではFlexboxの真価を発揮させるためのHTML構造の組織化について学んでいきます。

1. フレックスコンテナの作成

Flexboxを使用するには、まずフレックスコンテナ (Flex Container) を定義する必要があります。対象となるHTML要素の display プロパティを flex または inline-flex に設定するだけで準備は完了です。

display: flex;：要素をブロックレベル (Block-level) のフレックスコンテナに変換します。<div> のように動作し、利用可能な全幅を占有して新しい行から表示されます。
display: inline-flex;：要素をインラインレベル (Inline-level) のフレックスコンテナに変換します。<span> のように動作し、幅はコンテンツに応じて決定され、周囲のテキストと同じ行に並びます。

コード例：

<div class="container">
  <div class="item">プロジェクト 1</div>
  <div class="item">プロジェクト 2</div>
  <div class="item">プロジェクト 3</div>
</div>

.container {
  display: flex; /* または display: inline-flex; */
  background-color: #f0f0f0;
  padding: 20px;
}

.item {
  background-color: #ccc;
  margin: 10px;
  padding: 20px;
  text-align: center;
}

この例では、container クラスを持つ div がフレックスコンテナであり、その内部にある item クラスを持つ div 要素がフレックスアイテムとなります。

2. フレックスコンテナ vs. ブロック/インライン要素

フレックスコンテナと、通常のブロック (Block) 要素やインライン (Inline) 要素の違いを理解することは非常に重要です。ある要素に display: flex を適用すると、以下のような変化が起こります。

直接の子要素は、レイアウトにおいて本来のブロックレベルやインラインレベルの特性を失います。それらはフレックスアイテムへと変身し、完全にFlexboxのルールに従って整列されるようになります。
フレックスコンテナ自体は、その親要素から見て、依然としてブロックレベル（flex の場合）またはインラインレベル（inline-flex の場合）としての振る舞いを維持します。

コードデモ：

<div>
  <p>フレックスコンテナの前のテキスト。</p>
  
  <div class="container">
    <div class="item">プロジェクト 1</div>
    <div class="item">プロジェクト 2</div>
  </div>
  
  <p>フレックスコンテナの後のテキスト。</p>
</div>

原理の解析：

.container が display: flex の場合：外側の <p> 要素は .container を通常のブロックレベル要素として扱い、それぞれが1行を独占します。一方、コンテナ内部の「プロジェクト 1」と「プロジェクト 2」はFlexboxのルールに従って横並び（デフォルト）になります。
.container が display: inline-flex の場合：外側の <p> 要素は依然としてブロックレベルですが、.container 自体はインライン要素として扱われます。十分なスペースがあれば、周囲のテキストと同じ行に並ぶことが可能ですが、内部のアイテムはやはりFlexboxのルールに従います。

3. フレックスアイテム (Flex Items) の詳細

フレックスアイテムはフレックスコンテナの直接の子要素です。これらは主軸 (Main Axis) と 交差軸 (Cross Axis) に沿って配置されます（軸の詳細については次節の flex-direction で詳しく解説します）。

まず、フレックスアイテムが持つ基本的な特性を理解しておきましょう。

配置方向 (Flow Direction)：デフォルトでは、フレックスアイテムは1行（水平方向）に並びます。この方向は flex-direction プロパティで変更可能です。
コンテンツベースのサイズ (Content-Based Sizing)：フレックスアイテムは、最初は内部のコンテンツのサイズに基づいて自身のサイズを決定します。その後、flex-grow、flex-shrink、flex-basis といったプロパティを使用して、コンテナ内でどのように拡大・縮小するかを精密にコントロールできます。
Margin Auto の「空白吸収」マジック：Flexboxにおいて margin: auto は特別な力を持ちます。特定の方向にあるすべての余剰スペースを吸収するため、アイテムをコンテナの端に押しやったり、アイテム間に均等なスペースを作ったりするのに非常によく使われます。
レイヤー制御 (Z-Index)：デフォルトでは、フレックスアイテムはHTMLソースの順序に従ってレンダリングされます（order プロパティを使用しない限り）。これらはポジショニングされた要素と同様に、z-index プロパティを完全にサポートしており、重なりの順序を制御できます。

3.1 実践例：Margin Auto の活用

<div class="container">
  <div class="item">プロジェクト 1</div>
  <div class="item" style="margin-left: auto;">プロジェクト 2</div>
</div>

.container {
  display: flex;
  background-color: #f0f0f0;
  padding: 20px;
}

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

この例では、「プロジェクト 2」に適用された margin-left: auto が、そのアイテムをコンテナの右端へと押しやります。これは margin: auto がスポンジのように、左側にある利用可能な余剰スペースをすべて吸収した結果です。