Tailwind で「justify-content」を使用してブレークポイントとメディア クエリを適用する方法

」 中および大画面サイズで項目の水平方向の配置を変更する要素:

< 体 >

< ディビジョン クラス = 「flex justify-start md:justify-between lg:justify-end gap-3 m-3 bg-teal-700」 >
< ディビジョン クラス = 「bg- yellow-400 w-24 h-12」 > 1 < / ディビジョン >
< ディビジョン クラス = 「bg- yellow-400 w-24 h-12」 > 2 < / ディビジョン >
< ディビジョン クラス = 「bg- yellow-400 w-24 h-12」 > 3 < / ディビジョン >

< / ディビジョン >

< / 体 >

ここ：

• 「ジャスティファイスタート」 クラスは、コンテナの主軸の先頭にフレックス項目を配置します。
• 「md:justify-between」 このクラスは、中程度の画面サイズでコンテナの主軸に沿ってフレックス項目を均等な間隔で配置します。
• 「lg:justify-end」 このクラスは、大きな画面サイズでコンテナの主軸の端にフレックス項目を配置します。

出力

---

---

上記の出力は、画面サイズの変化に応じて flex アイテムの水平方向の配置が変化していることを示しています。これは、指定されたブレークポイントとメディア クエリが「justify-content」ユーティリティで効果的に適用されたことを示します。

結論

Tailwind の「justify-content」ユーティリティを使用してブレークポイントとメディア クエリを適用するには、目的の値を 「justify-<値>」 「」を利用してさまざまな画面サイズに対応するユーティリティ MD ' また ' LG ” ブレークポイント。確認のために、Web ページの画面サイズを変更し、変更を確認します。この記事では、Tailwind の「justify-content」ユーティリティに目的のブレークポイントとメディア クエリを適用する例を示しました。