CSSのjustify-contentでフレックスボックス内のアイテムの水平配置を制御する方法をわかりやすく解説

2024.09.14
スポンサーリンク

CSSのjustify-contentプロパティは、フレックスボックスコンテナ内でのアイテムの水平配置を制御するために使用されます。このプロパティにより、アイテムをどのように整列させるか、余白をどのように分配するかを指定できます。以下に、主な値とその効果をリストで説明し、詳細な表示例と共に解説します。

スポンサーリンク

justify-contentプロパティの値とその効果の一覧

  • justify-content: flex-start;（デフォルト値） – アイテムをコンテナの左側に揃えます。
  • justify-content: flex-end; – アイテムをコンテナの右側に揃えます。
  • justify-content: center; – アイテムをコンテナの中央に配置します。
  • justify-content: space-between; – アイテム間に均等な余白を挿入し、最初のアイテムは左端、最後のアイテムは右端に配置されます。
  • justify-content: space-around; – アイテム間に均等な余白を挿入しますが、左右の余白も少し入ります。
  • justify-content: space-evenly; – アイテム間の余白が均等に分配されます（space-betweenとの違いは、左右にも同じ余白が入る点です）。

注意点や関連情報

justify-contentプロパティは、フレックスボックスのdisplay: flexで使用されます。また、アイテムの水平配置に影響するため、縦方向の配置はalign-itemsプロパティで制御する必要があります。space-betweenやspace-aroundは、余白の配分が異なるため、デザインに合わせて適切なプロパティを選ぶことが重要です。

justify-contentプロパティが効かない時の原因と対策

displayプロパティがフレックスボックスまたはグリッドレイアウトに設定されていない

justify-contentプロパティは、フレックスボックス（display: flex;）やグリッドレイアウト（display: grid;）でコンテナ内のアイテムを水平方向に配置するために使用されます。要素がフレックスボックスやグリッドレイアウトとして設定されていない場合、このプロパティは効果を発揮しません。
対策: 親要素にdisplay: flex;またはdisplay: grid;を指定して、justify-contentが機能するレイアウトを適用しましょう。例えば、display: flex; justify-content: center;と設定して、子要素を中央に配置します。

flex-wrapプロパティが影響している

justify-contentは、フレックスボックスのアイテムが1行に収まっている場合に効果を発揮しますが、flex-wrap: wrap;が指定されていると、アイテムが複数行に分割され、justify-contentの効果が変わることがあります。
対策: flex-wrap: nowrap;を設定して、すべてのアイテムが1行に収まるようにします。複数行に渡る場合は、align-contentを使用して行全体の配置を調整します。

コンテナの水平方向ではなく垂直方向に配置を変更している

justify-contentは水平方向（横方向）のアイテム配置を制御しますが、垂直方向の配置を変更する場合にはalign-itemsやalign-contentを使用する必要があります。
対策: 垂直方向に配置を変更したい場合は、align-itemsやalign-contentを使用して調整します。例えば、align-items: center;で垂直方向に中央揃えを指定できます。

共通するCSSコード

.css-sample-container {
      display: flex;
      width: 100%;
      height: 200px;
      background-color: #f9f9f9;
      padding: 20px;
      border: 1px solid #ccc;
      margin: 20px auto;
    }

    .css-sample-item {
      background-color: #cce7ff;
      border: 1px solid #99ccff;
      padding: 20px;
      text-align: center;
      margin: 10px;
      width: 80px;
    }

justify-content: flex-start;（デフォルト値）

アイテムはフレックスコンテナの左側に揃えられます。特に指定がない場合、この設定が適用されます。

HTMLコード

<div class="css-sample-container css-sample-justify-start">
      <div class="css-sample-item">1</div>
      <div class="css-sample-item">2</div>
      <div class="css-sample-item">3</div>
    </div>

CSSコード

.css-sample-justify-start {
      justify-content: flex-start;
    }

表示結果

1
2
3

justify-content: flex-end;

アイテムはフレックスコンテナの右側に揃えられます。

HTMLコード

<div class="css-sample-container css-sample-justify-end">
      <div class="css-sample-item">1</div>
      <div class="css-sample-item">2</div>
      <div class="css-sample-item">3</div>
    </div>

CSSコード

.css-sample-justify-end {
      justify-content: flex-end;
    }

表示結果

1
2
3

justify-content: center;

アイテムはコンテナの中央に配置されます。

HTMLコード

<div class="css-sample-container css-sample-justify-center">
      <div class="css-sample-item">1</div>
      <div class="css-sample-item">2</div>
      <div class="css-sample-item">3</div>
    </div>

CSSコード

.css-sample-justify-center {
      justify-content: center;
    }

表示結果

1
2
3

justify-content: space-between;

アイテム間に均等な余白が入り、最初のアイテムは左端、最後のアイテムは右端に配置されます。

HTMLコード

<div class="css-sample-container css-sample-justify-space-between">
      <div class="css-sample-item">1</div>
      <div class="css-sample-item">2</div>
      <div class="css-sample-item">3</div>
    </div>

CSSコード

.css-sample-justify-space-between {
      justify-content: space-between;
    }

表示結果

1
2
3

justify-content: space-around;

アイテム間に均等な余白が入り、左右にも余白が追加されます。

HTMLコード

<div class="css-sample-container css-sample-justify-space-around">
      <div class="css-sample-item">1</div>
      <div class="css-sample-item">2</div>
      <div class="css-sample-item">3</div>
    </div>

CSSコード

.css-sample-justify-space-around {
      justify-content: space-around;
    }

表示結果

1
2
3

justify-content: space-evenly;

アイテム間の余白が均等に配置され、左右にも同じ余白が追加されます。

HTMLコード

<div class="css-sample-container css-sample-justify-space-evenly">
      <div class="css-sample-item">1</div>
      <div class="css-sample-item">2</div>
      <div class="css-sample-item">3</div>
    </div>

CSSコード

.css-sample-justify-space-evenly {
      justify-content: space-evenly;
    }

表示結果

1
2
3

まとめ

  • justify-contentプロパティは、フレックスボックスコンテナ内でのアイテムの水平配置を制御します。
  • デフォルト値はflex-startで、アイテムは左側に揃います。
  • space-betweenやspace-aroundは、アイテム間に余白を配置し、左右にも適切な余白を設定できます。
  • コンテナ内のアイテムをどのように配置したいかによって、適切な値を選ぶことが重要です。
スポンサーリンク