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

CSSでフレックスアイテムをコンテナの中央に揃える方法

CSSでフレックスアイテム（flexアイテム）をコンテナの中央に配置したい場合は、justify-content プロパティに center を指定します。このプロパティは、主軸（デフォルトでは水平方向）に沿ってフレックスアイテムをどのように配置するかを制御するもので、center を設定すると余白が均等に分配され、アイテム全体がコンテナの中央にまとまります。

justify-content の基本的な使い方

親要素に 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: #F1C40F;
  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：親要素に display: flex; と justify-content: center; を指定し、子要素を中央に配置しています。
  • .mycontainer > div：各フレックスアイテムには幅100px・マージン5pxを設定し、テキストも中央揃えにしています。

justify-content のその他の値

center 以外にも、レイアウトの目的に応じて以下のような値を使い分けることができます。

  • flex-start：アイテムを主軸の始点側に寄せます（初期値）。
  • flex-end：アイテムを主軸の終点側に寄せます。
  • space-between：最初と最後のアイテムを両端に置き、残りを均等に配置します。
  • space-around：各アイテムの周囲に均等な余白を設けます。
  • space-evenly：すべての間隔を完全に均等に配置します。

垂直方向（交差軸）の中央揃えを行いたい場合は、align-items: center; を併用すると、縦横どちらも中央に配置したレイアウトが簡単に実現できます。

  1. CSSでフレックスラインをコンテナの先頭に表示する方法(align-content: flex-start)

    CSSのalign-contentプロパティにflex-startという値を指定すると、フレックスコンテナ内の複数のフレックスライン(行)をコンテナの先頭側に寄せて配置できます。 align-content: flex-startの基本 align-contentプロパティは、交差軸(cross axis)方向におけるフレックスライン全体の配置を制御するプロパティです。flex-startを指定すると、すべてのフレックスラインが交差軸の開始位置、つまりコンテナの先頭にまとめられて表示されます。 注意点として、align-contentが機能するのはflex-wrap: wrap;などで折り

  2. CSSのflexプロパティでフレックスアイテムのサイズを制御する方法

    CSSでフレックスボックスレイアウト内のアイテム（フレックスアイテム）の寸法を制御するには、flexプロパティを使用します。flexプロパティは「flex-grow」「flex-shrink」「flex-basis」の3つの値をまとめて指定できるショートハンドプロパティで、各アイテムがコンテナ内でどのように伸縮するかを細かく設定できます。 flexプロパティの基本構文 flex: flex-grow flex-shrink flex-basis; flex-grow： 余ったスペースを他のアイテムと比べてどれだけ多く受け取るかを指定します（初期値：0）。 flex-shrink： スペースが