Tailwind CSS 練習問題 22：Tailwindのflexアイテム配置（justify-content・align-items）ユーティリティ
Tailwind CSSにおいて、要素を横方向の中央だけでなく縦方向にも中央揃えにし、Flexboxで完全に中央配置したい場合、正しいクラスの組み合わせはどれか。
- flex justify-center items-center
- flex justify-center align-center
- flex text-center items-center
- flex center-all
- flex justify-items-center
正解と解説を見る
正解：flex justify-center items-center
Flexboxコンテナ内で子要素を水平・垂直両方向に中央配置するには、`flex`を親要素に指定した上で、主軸方向の中央揃えを行う`justify-center`と交差軸方向の中央揃えを行う`items-center`を組み合わせます。
【正解の理由】
`justify-center`は主軸（デフォルトでは水平方向）に沿って子要素を中央に配置し、`items-center`は交差軸（デフォルトでは垂直方向）に沿って子要素を中央に配置します。この2つを組み合わせることで完全な中央配置が実現します。
【不正解の理由】
• 「flex justify-center align-center」：`align-center`はTailwindに存在しないクラス名で、正しくは`items-center`を使う必要がある
• 「flex text-center items-center」：`text-center`はテキストの水平配置を揃えるためのクラスであり、Flexboxコンテナ全体の主軸配置には効果がない
• 「flex center-all」：Tailwindにはそのようなクラスは存在しない
• 「flex justify-items-center」：`justify-items-center`はCSS Gridレイアウトで使われる配置プロパティに対応するクラスであり、Flexboxの主軸中央揃えには`justify-center`を使う必要がある