【tailwindcss】class="flex items-xxxxxx justify-xxxxxx"の意味を説明できるようになりたい

はじめに

tailwindcssを使う際、各ボックスを横並びにするときはflex、縦並びにするときはflex-colをなんとなく使用していました。flexやflex-col、justify-XXXやitems-xxxの指定はそれぞれ何を意味するのか、学んだことをまとめました。

1.flexを確認してみる

横並び：flex

      <div class="flex h-32 bg-gray-200">
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
      </div>

横並び：flex-row

      <div class="flex flex-row h-32 bg-gray-200">
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
      </div>

縦並び：flex-col

      <div class="flex flex-col h-32 bg-gray-200">
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
      </div>

2.justify-xxxxxxを確認してみる

• justify-XXXX：主軸に対して、操作をする

flexの場合、主軸は水平方向、flex-colの場合、主軸は垂直方向になります。
justify-centerを指定し、主軸の中央にボックスが配置されるように設定しました。

      <div class="flex justify-center items-center h-32 bg-gray-200">
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
      </div>

      <div class="h-2 bg-white-200"></div>

      <div class="flex flex-col justify-center items-center h-32 bg-gray-200">
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
      </div>

justify-centerを消すとどうなるかを確認してみます。

-      <div class="flex justify-center items-center h-32 bg-gray-200">
+      <div class="flex items-center h-32 bg-gray-200">
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
      </div>

      <div class="h-2 bg-white-200"></div>

-      <div class="flex flex-col justify-center items-center h-32 bg-gray-200">
+      <div class="flex flex-col items-center h-32 bg-gray-200">
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
      </div>

上段の横並びのボックスは主軸の水平方向の配置の指定がないため、ボックスが中央に配置されません。
下段の縦並びのボックスも主軸の垂直方向の指定がないため、ボックスが均等に配置されなくなりました。

3.items-xxxxxxを確認してみる

• items-XXXX：交差軸に対して、操作をする

flexの場合、交差軸は垂直方向、flex-colの場合、交差軸は水平方向になります。
items-centerを指定し、交差軸の中央にボックスが配置されるように設定しました。
items-centerを消すとどうなるかを確認してみます。

-      <div class="flex justify-center items-center h-32 bg-gray-200">
+      <div class="flex justify-center h-32 bg-gray-200">
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
      </div>

      <div class="h-2 bg-white-200"></div>

-      <div class"flex flex-col justify-center items-center h-32 bg-gray-200">
+      <div class="flex flex-col justify-center h-32 bg-gray-200">
        <div class="bg-blue-500 p-2 m-2">ボックス</div>
      </div>

上段の横並びのボックスは交差軸の垂直方向の指定がないため、ボックスが縦に伸びました。
下段の縦並びのボックスも交差軸の水平方向の指定がないため、ボックスが横に伸びました。

ボックスが伸びた理由

items-xxxxxxを指定しない場合、デフォルトのitems-stretch(子要素を親要素の高さに合わせる)が適用されるため。

おわりに

今回記事にしたきっかけは、生成AIの学習モードをお試しで使っていた時、
「Tailwind CSSを使っていて、例えば class="flex items-center justify-between p-4 bg-blue-500" のようなクラスを書くとき、それぞれのクラスが具体的に何をしているか説明できますか？」の質問に対して、flex items-center justify-betweenの意味が答えられないことでした。
（本記事とは関係ないですが、学習モードいいですね…気軽になんでも聞ける家庭教師ができた気分になれます。）

justifyやitemsは一瞬ややこしいと思いましたが、実際に試してみると理解が深まりました。
リファレンスを参照つつ適用していきたいと思います。

参考