【CSS】Flexboxのjustify-contentで水平方向の配置を指定する

Flexboxのjustify-contentの基本的な使い方を紹介します。

Flexboxでのjustify-content

Flexboxは、要素を一次元のフレックスコンテナ内で効果的に配置するための方法を提供します。以下は、justify-contentプロパティの一部の使い方です。

.container {
  display: flex;
  justify-content: space-between;
}

このコードは、.container内のフレックスアイテムをコンテナの両端に均等に配置します。他にも、flex-start、flex-end、center、space-betweenなどが利用可能です。

/* flex-start: 開始位置に寄せる */
    .container.start {
      justify-content: flex-start;
    }

/* flex-end: 終了位置に寄せる */
    .container.end {
      justify-content: flex-end;
    }

/* center: 中央に配置 */
    .container.center {
      justify-content: center;
    }

/* space-between: コンテンツの間に均等なスペースを挿入 */
    .container.between {
      justify-content: space-between;
    }

/* space-around: コンテンツの周りに均等なスペースを挿入 */
    .container.around {
      justify-content: space-around;
    }

/* space-evenly: コンテンツの間と周りに均等なスペースを挿入 */
    .container.evenly {
      justify-content: space-evenly;
    }

Gridレイアウトも同様に、justify-contentを使用してコンテンツを水平方向に配置できます。以下は、Gridコンテナの例です。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-around;
}

この例では、.container内のgridアイテムを水平方向に均等に配置し、間にスペースを追加します。