Zenn
🌟

justify-content を水平方向揃え、align-items を垂直方向揃えにするプロパティではないというお話

2022/03/13に公開
CSS
HTML
tech

背景

displayをflexにしたflexコンテナ内のflexアイテムを水平や垂直に揃える方法として以下のような解説がされている記事をよく見かけます

justify-content は水平方向に要素を揃えるプロパティである
align-items は垂直方向に要素を揃えるプロパティである

一方で MDN の該当ページを見てみると全く違った解説がされているので、自分も含めたこれからCSSを勉強してもらう方に、できるだけ誤解のある知識が身につかないようにと思いました。

解説

じゃあ、justify-content と align-items は何なの

結論からお伝えすると、justify-content は主軸方向に flex アイテムを揃えて、align-items は交差軸方向に flex アイテムを揃えます。

主軸？交差軸？

主軸(Main Axis)とは flex-direction プロパティによって設定される方向です。
flex-direction プロパティは row や column といった値を設定することができます。
一方で交差軸(Cross Axis)とは 主軸と交差する軸のことです。flex-direction に row が設定されている場合には、交差軸はいわゆるY軸方向と同様です。

なぜ、justify-content は水平方向揃え、align-items は垂直方向揃えと言われるようになったのか

先ほど説明したように、justify-content と align-items は flex-direction の値に依存しています。この flex-direction はデフォルト値として row が設定されており、flex-direction の存在を知らない人たちから見れば justify-content は水平方向を揃えるプロパティであると考えるようになったのではないかと思います。

では最後に align-items が水平方向揃えのプロパティであることを示す簡単なコードを書いてみます。

<div class="d-flex">
    <div class="box box-red">box-red</div>
    <div class="box box-blue">box-blue</div>
    <div class="box box-green">box-green</div>
</div>

.d-flex {
    display: flex;
    flex-direction: column;
    /* align-items が水平方向に要素を配置している */
    align-items: flex-end;
}

.box {
    width: 200px;
    height: 200px;
    color: white;
}

.box-red {
    background-color: red;
}

.box-blue {
    background-color: blue;
}

.box-green {
    background-color: green;
}

参考資料

justify-content
align-items
Main Axis (主軸)
Cross Axis (交差軸)

Discussion