Zenn
📐

flex-direction: column で思ったように中央揃えにならない？justify-contentとalign-itemsの違い

に公開
CSS
初心者
Flexbox
tech

はじめに

「Flexbox」でレイアウトを組む際、

水平方向の配置は justify-content、垂直方向の配置は align-items

と覚えている方はいませんか？（はい、私です）

flex-direction: column を使った場面では、この覚え方のままだと思ったように中央に揃えられないかもしれません。

たとえば、以下のようなシンプルなフォームを水平方向に中央に揃えようとします。

html
<form>
  <input type="text" placeholder="テキスト">
  <input type="email" placeholder="メールアドレス">
  <button>送信</button>
</form>
css
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

上の画像のように水平方向に中央揃えしたいので、さっきの覚え方でいくと、
水平方向＝justify-contentなので、justify-content: centerを使ってみます。

css
form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

垂直方向に中央揃えになってしまいました。

なぜ左右中央にならなかったのか？軸のしくみを知って納得

Flexboxでは、プロパティの意味がflex-directionによって変わるという仕組みになっています。

プロパティ 対象の軸 説明
justify-content 主軸（メイン軸） 要素を並べる方向に揃える
align-items 交差軸（クロス軸） 並べる方向と直角方向に揃える

そして、flex-direction: column の場合：

  • 主軸 = 垂直方向（上から下）
  • 交差軸 = 水平方向（左から右）

つまり、

  • justify-content → 垂直方向の揃え
  • align-items → 水平方向の揃え

となります。

先ほど例に挙げたフォームも
主軸は垂直方向なので、水平方向に中央に揃えたい場合は、align-itemsを使えば良かったのです。

css
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

このように書き直した結果、以下のように

思い通りの配置にすることができました。

※ちなみに、flex-direction: row（初期値）の場合は、

  • justify-content → 横方向の揃え
  • align-items → 縦方向の揃え
    になります。

この場合は

水平方向の配置は justify-content、垂直方向の配置は align-items

という覚え方でも成り立ちます。

まとめ

  • justify-contentは主軸上の配置を制御するプロパティ
  • align-itemsは交差軸上の配置を制御するプロパティ
  • flex-direction: column にすると、主軸は縦方向に変わる
  • 軸の向きを意識すると混乱しない

Discussion