Tailwind CSS はさまざまな「 アイテムの整列 」ユーティリティを使用して、コンテナの交差軸に沿ったフレックス項目とグリッド項目の位置を制御します。これらのユーティリティ クラスには、「items-start」、「items-center」、「items-end」、「items-baseline」、および「items-stretch」が含まれます。さらに、ユーザーは「items-
この記事では、Tailwind の「align-items」ユーティリティでブレークポイントとメディア クエリを適用する方法を説明します。
Tailwind の「align-items」を使用してブレークポイントとメディア クエリを適用する方法
Tailwind の「justify-content」ユーティリティに必要なブレークポイントとメディア クエリを適用するには、HTML 構造を作成します。その後、「」に具体的な値を定義します。 items-<値> 」ユーティリティを使用してさまざまな画面サイズに対応 MD ' また ' LG ” ブレークポイント。最後に、検証用Webページの画面サイズを変更します。
例
この例では、「items-start」プロパティを使用してフレックス コンテナを作成します。 「」を使用します。 MD ” を使用したブレークポイント アイテムセンター 「ユーティリティ」と「 LG ” を使用したブレークポイント アイテム終了 「」のユーティリティ 出力 Tailwind の「align-items」ユーティリティを使用してブレークポイントとメディア クエリを適用するには、目的の値を「」に定義します。 items-<値> 」ユーティリティを利用して、さまざまな画面サイズに対応します。 MD ' また ' LG ” ブレークポイント。確認のために、Web ページの画面サイズを変更し、変更を確認します。この記事では、Tailwind の「align-items」ユーティリティに特定のブレークポイントとメディア クエリを適用する例を説明しました。
< 体 >
< ディビジョン クラス = 'flex items-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< ディビジョン クラス = 「bg-ピンク-600 py-4 w-40」 > 1 ディビジョン >
< ディビジョン クラス = 「bg-ピンク-600 py-12 w-40」 > 2 ディビジョン >
< ディビジョン クラス = 「bg-ピンク-600 py-8 w-40」 > 3 ディビジョン >
ディビジョン >
体 >
ここ：
上記の出力は、画面サイズの変化に応じて flex 項目の垂直方向の配置が変化していることを示しています。これは、指定されたブレークポイントとメディア クエリが「align-items」ユーティリティで効果的に適用されたことを示します。 結論