フレックスボックスで整列を自在に操る：`align-items`と`justify-content`

CSSフレックスボックスレイアウトは、Webページの要素を柔軟に配置するためのレイアウトモードです。従来のレイアウト方法と比べて、フレックスボックスはより直感的で、レスポンシブなレイアウトを作成しやすいという利点があります。

このガイドでは、フレックスコンテナー内のアイテムをどのように配置するかについて説明します。

用語

以下の用語を理解しておくと、このガイドの内容をより理解しやすくなります。

整列
フレックスアイテムを主軸または交差軸に沿ってどのように配置するかを決定します。
交差軸
主軸に垂直な方向。デフォルトは垂直方向（flex-direction: row）。
主軸
フレックスアイテムが並ぶ方向。デフォルトは水平方向（flex-direction: row）。
フレックスアイテム
フレックスコンテナー内に配置される要素。
フレックスコンテナー
フレックスボックスレイアウトを使用する要素。

アイテムの整列

フレックスアイテムの整列を制御するには、以下のプロパティを使用します。

justify-content
フレックスアイテムを主軸方向にどのように整列するかを指定します。
- flex-start: アイテムを先頭に整列します。
- center: アイテムを中央に整列します。
- flex-end: アイテムを末尾に整列します。
- space-around: アイテム間に等間隔のスペースを配置します。
- space-between: アイテム間の最初のアイテムと最後のアイテムを除いて、アイテム間に等間隔のスペースを配置します。
align-items
フレックスアイテムを交差軸方向にどのように整列するかを指定します。
- flex-start: アイテムを先頭に整列します。
- center: アイテムを中央に整列します。
- flex-end: アイテムを末尾に整列します。
- stretch: アイテムをコンテナーの高さ全体に伸ばします。

例

以下の例は、align-items と justify-content プロパティを使用して、フレックスコンテナー内のアイテムを配置する方法を示しています。

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

この例では、以下のようになります。

アイテムは、フレックスコンテナーの両端に整列され、アイテム間には等間隔のスペースが配置されます。
アイテムは、フレックスコンテナーの垂直方向の中央に整列されます。
フレックスコンテナー内のアイテムは、水平方向に並ぶようになります。

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row; /* アイテムを水平方向に並べる */
  align-items: center; /* アイテムを垂直方向の中央に整列する */
  justify-content: space-between; /* アイテムを両端に配置し、間隔を空ける */
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px; /* アイテム間にマージンを追加 */
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">アイテム 1</div>
  <div class="flex-item">アイテム 2</div>
  <div class="flex-item">アイテム 3</div>
</div>

</body>
</html>

このコードを実行すると、次のようになります。

アイテムは、ブラウザウィンドウの両端に配置され、アイテム間には等間隔のスペースが配置されます。
アイテムは、ブラウザウィンドウの垂直方向の中央に整列されます。
3つのアイテムが水平方向に並びます。

説明

このコードは以下の通りです。

.flex-item クラスは、フレックスアイテムのスタイルを定義します。この例では、アイテムの幅と高さを設定し、背景色を設定しています。
justify-content: space-between; プロパティは、フレックスアイテムを両端に配置し、アイテム間には等間隔のスペースを空けることを指定します。
align-items: center; プロパティは、フレックスアイテムを垂直方向の中央に整列することを指定します。
flex-direction: row; プロパティは、フレックスアイテムを水平方向に並べることを指定します。
display: flex; プロパティは、要素をフレックスコンテナーに変換します。

バリエーション

このコードは、さまざまな方法でカスタマイズできます。たとえば、次のようにすることができます。

order プロパティを使用して、アイテムの表示順序を変更する。
flex-grow プロパティを使用して、余分なスペースをアイテムに割り当てる。
justify-content プロパティを使用して、アイテムをフレックスコンテナーの中央に整列する。
align-items プロパティを使用して、アイテムをフレックスコンテナーの先頭または末尾に整列する。
flex-direction プロパティを使用して、アイテムを垂直方向に並べる。

グリッドレイアウト

CSSグリッドレイアウトは、より複雑で構造化されたレイアウトを作成するための強力なツールです。行と列のグリッドを作成し、アイテムをそのグリッドセルに配置できます。フレックスボックスと同様に、グリッドレイアウトはレスポンシブに対応しており、さまざまな画面サイズに適応できます。

例

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.grid-item {
  background-color: #ccc;
  padding: 20px;
}

この例では、次のようになります。

アイテム間に20pxの隙間ができます。
各列の最小幅は200pxですが、必要に応じて伸縮します。
コンテナーは、列の数を自動的に調整する repeat(auto-fit, minmax(200px, 1fr)) グリッドテンプレート列を持つグリッドレイアウトになります。

絶対配置

絶対配置は、アイテムをコンテナーの通常のフローから取り除き、正確な位置に配置するのに役立ちます。これは、アイテムを他のアイテムの上に重ねたり、ページの特定の領域に配置したりする場合に便利です。

例

.absolute-item {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

アイテムの幅と高さは100pxで、背景色はグレーです。
.absolute-item は、コンテナーの右上隅から20pxの位置に配置されます。

相対配置

相対配置は、アイテムをその通常のフローの位置からオフセットするのに役立ちます。これは、アイテムを他のアイテムと少しだけ重ねたり、ページの特定の領域に配置したりする場合に便利です。

例

.relative-item {
  position: relative;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

アイテムの幅と高さは100pxで、背景色はグレーです。
.relative-item は、その通常のフローの位置から50px上、50px左にオフセットされます。

フロート

フロートは、アイテムを他の要素の横に配置するのに役立ちます。これは、サイドバーやナビゲーションメニューなどのレイアウトを作成する場合に役立ちます。

.float-item {
  float: left;
  width: 200px;
  height: 300px;
  background-color: #ccc;
}

アイテムの幅は200px、高さは300px、背景色はグレーです。
.float-item は左側にフロートし、他の要素の横に配置されます。