CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのjustify-contentプロパティでcenter値を使ってフレックスアイテムを中央揃えにする方法

CSSのjustify-contentプロパティにcenter値を指定すると、フレックスコンテナ内のフレックスアイテムを主軸方向（横並びの場合は水平方向）の中央に配置できます。

この値は、余白をアイテムの左右に均等に分配し、アイテム全体をコンテナの中心にまとめて表示したい場合に便利です。例えば、ナビゲーションメニューやボタングループを画面中央に揃えたいときなどに活用できます。

center値の基本的な使い方

親要素（フレックスコンテナ）にdisplay: flex;とjustify-content: center;を指定するだけで、子要素が中央に寄せられます。

.mycontainer {
  display: flex;
  justify-content: center;
}

実装例

以下のコードは、4つのフレックスアイテムを赤い背景のコンテナ内で中央に配置するサンプルです。実際にブラウザで実行して、動作を確認してみてください。

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: red;
      justify-content: center;
    }
    .mycontainer > div {
      background-color: orange;
      text-align: center;
      line-height: 60px;
      font-size: 30px;
      width: 100px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
  </div>
</body>
</html>

コードのポイント

  • .mycontainer：フレックスコンテナとして機能し、justify-content: center;によって子要素が水平方向の中央に配置されます。
  • 子要素（div）：オレンジ色の背景を持つフレックスアイテムで、幅100px・マージン5pxが設定されています。
  • line-heightとtext-alignにより、各アイテム内のテキストも上下左右とも中央に表示されます。

なお、垂直方向の中央揃えを行いたい場合は、align-items: center;を併用すると効果的です。また、flex-start（左寄せ）、flex-end（右寄せ）、space-between（両端揃え）など、他の値との違いも理解しておくと、レイアウト調整の幅が広がります。

  1. CSSのjustify-contentプロパティでspace-betweenを使う方法

    CSSのjustify-contentプロパティにspace-betweenを指定すると、フレックスコンテナ内のアイテム（flex-items）の間に均等な余白を自動的に配置できます。この値を設定すると、最初のアイテムはコンテナの先頭に、最後のアイテムは末尾に寄せられ、残りのアイテムがその間に等間隔で分散されます。レイアウトのバランスを整えたい場合に非常に便利です。以下のコードを実行して、space-between値の動作を確認してみてください。サンプルコード<!DOCTYPE html> <html>    <head>  

  2. CSSのflex-directionプロパティ「row-reverse」の使い方と役割を徹底解説

    flex-directionプロパティのrow-reverse値とは CSSのflex-directionプロパティは、フレックスコンテナ内のフレックスアイテムが並ぶ方向を指定するためのプロパティです。このプロパティにrow-reverseという値を指定すると、アイテムは水平方向に、しかも右から左へ逆順に配置されます。 通常のrowではアイテムは左から右へ並びますが、row-reverseを指定すると主軸の方向が反転し、HTML上で最初に記述した要素が一番右側に表示されるようになります。RTL(右から左)言語への多言語対応や、デザイン上の理由で並び順を反転させたい場合などに活用できる便利な値で