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

2024-05-24

CSS フレックスボックスレイアウト:フレックスコンテナー内のアイテムの配置

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

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

用語

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

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

アイテムの整列

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

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

以下の例は、align-itemsjustify-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つのアイテムが水平方向に並びます。

説明

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

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

バリエーション

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

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


    フレックスボックスレイアウトでアイテムを配置するその他の方法

    グリッドレイアウト

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

    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }
    
    .grid-item {
      background-color: #ccc;
      padding: 20px;
    }
    
    • コンテナーは、列の数を自動的に調整する repeat(auto-fit, minmax(200px, 1fr)) グリッドテンプレート列を持つグリッドレイアウトになります。
    • 各列の最小幅は200pxですが、必要に応じて伸縮します。
    • アイテム間に20pxの隙間ができます。

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

    .absolute-item {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
    
    • .absolute-item は、コンテナーの右上隅から20pxの位置に配置されます。
    • アイテムの幅と高さは100pxで、背景色はグレーです。
    .relative-item {
      position: relative;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
    
    • .relative-item は、その通常のフローの位置から50px上、50px左にオフセットされます。

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

    .float-item {
      float: left;
      width: 200px;
      height: 300px;
      background-color: #ccc;
    }
    
    • .float-item は左側にフロートし、他の要素の横に配置されます。