問題2: justify-contentで中央寄せできない

問題

justify-content: centerを指定しているのに、要素が横幅いっぱいに広がってしまい、中央寄せされません。何が問題でしょうか？

HTML

<div class="container">
  <div class="box">ボックス</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  background-color: #e0e0e0;
  padding: 20px;
}

.box {
  background-color: #2196F3;
  color: white;
  padding: 20px;
  width: 100%;  /* 幅100% */
}

実行結果

ボックス

※ ボックスが横幅いっぱいに広がってしまっています

🔧 実際に試してみよう（リアルタイム更新）

上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。
CSSの width: 100%; を削除して、違いを確認してみましょう。

📺 ライブプレビュー
更新中

ヒント

クリックしてヒントを表示

justify-contentは、フレックスアイテムを主軸に沿って配置しますが、アイテム自体のサイズには影響しません。

問題のコードをよく見ると、.boxに特定の幅が指定されています。

フレックスアイテムの幅が親要素の幅と同じ場合、中央寄せの余白がなくなります。

解答

クリックして解答を表示

問題の原因

.boxにwidth: 100%が指定されているため、フレックスアイテムがコンテナの幅いっぱいに広がっています。

技術的な説明

  • justify-content：フレックスアイテムを主軸に沿って配置する
  • width: 100%：利用可能な幅の100%を占有
  • フレックスアイテムがコンテナ幅の100%の場合、配置のための余白がない
  • 結果として、justify-contentの効果が視認できない

修正方法

方法1: width指定を削除または変更

.container {
  display: flex;
  justify-content: center;
  background-color: #e0e0e0;
  padding: 20px;
}

.box {
  background-color: #2196F3;
  color: white;
  padding: 20px;
  /* width: 100%; を削除 */
}
修正後の結果
ボックス

方法2: 固定幅を指定

.box {
  background-color: #2196F3;
  color: white;
  padding: 20px;
  width: 200px;  /* 固定幅を指定 */
}
固定幅での結果
ボックス

方法3: max-widthを使用

.box {
  background-color: #2196F3;
  color: white;
  padding: 20px;
  max-width: 300px;  /* 最大幅を制限 */
  width: 100%;       /* レスポンシブ対応 */
}
max-widthでの結果
ボックス

justify-contentの各値の動作

/* 左寄せ */
justify-content: flex-start;

/* 中央寄せ */
justify-content: center;

/* 右寄せ */
justify-content: flex-end;

/* 均等配置（両端寄せ） */
justify-content: space-between;

/* 均等配置（両端に半分の間隔） */
justify-content: space-around;

/* 均等配置（等間隔） */
justify-content: space-evenly;

覚えておくポイント

  • justify-contentは要素の配置を制御するが、要素のサイズは変更しない
  • フレックスアイテムの幅が重要：幅が100%だと配置効果が見えない
  • レスポンシブデザインではmax-widthと組み合わせると効果的