見出し画像

【CSS】align-itemsとjustify-contentの違いって何なの？🤔

ごろじ

`align-items`と`justify-content`は、CSS Flexboxレイアウトにおける2つの重要なプロパティです。これらはFlexboxコンテナ内でのアイテム（子要素）の配置を制御するために使用されますが、配置される軸が異なります。

`align-items`

`align-items`プロパティは、Flexboxの交差軸（cross axis）に沿ったアイテムの配置を制御します。交差軸はメイン軸に対して垂直です。Flexboxコンテナの`flex-direction`プロパティによってメイン軸が定義されるため、`align-items`の挙動もこれに依存します。

  • `flex-direction: row;`の場合、メイン軸は水平方向になり、`align-items`は垂直方向（上から下へ）の配置を制御します。

  • `flex-direction: column;`の場合、メイン軸は垂直方向になり、`align-items`は水平方向（左から右へ）の配置を制御します。

`justify-content`

`justify-content`プロパティは、Flexboxのメイン軸（main axis）に沿ったアイテムの配置を制御します。これにより、アイテムがFlexコンテナ内でどのように分散するかを決定できます。

  • `flex-direction: row;`の場合、メイン軸は水平方向で、`justify-content`はアイテムを水平方向に配置します。

  • `flex-direction: column;`の場合、メイン軸は垂直方向で、`justify-content`はアイテムを垂直方向に配置します。

まとめ

  • **`align-items`**は交差軸（メイン軸に垂直な軸）に沿ってアイテムを配置します。これは、アイテムがどのように行または列の中で垂直に配置されるかを制御します。

  • **`justify-content`**はメイン軸（アイテムが並ぶ方向の軸）に沿ってアイテムを配置します。これは、アイテムがコンテナ内で水平方向または垂直方向にどのように分散するかを制御します。

Flexboxを使うことで、レスポンシブなレイアウトを簡単に作成できますが、これらのプロパティの動作を理解することが重要です。

（なるほど～。メイン軸によって変わるんすねえ。😄）

　俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！　ご興味あれば、よろしくお願いいたしますッ！！

　それでは、最後まで読んでいただき、ありがとうございましたッ！！

よろしくお願いしますッ！