この記事では、Web ページ上で配置された要素の配置を制御するために使用できるユーティリティを紹介します。
Tailwind ユーティリティは、配置された要素の配置を制御するために使用されますか?
Tailwind CSS ユーティリティは、特に水平軸または垂直軸の両方で位置決めされた要素の配置を処理します。 トップ |右 |下 |左 ”。他のユーティリティと同様に、さまざまな場所に配置された要素を設定できるさまざまなクラスも提供します。これらのクラスの一部を以下に示します。
- inset-{placementValue}
- start-{placementValue}
- トップ-{placementValue}
- end-{placementValue}
- ボトム-{placementValue}
- left-{placementValue}
- right-{placementValue}
ここで、理解を深めるためにこれらのクラスのいくつかを使用する実際の例を見てみましょう。
例: Tailwind CSS ユーティリティを使用した位置決めされた要素の配置
この例では、以下に示すように、上記のユーティリティを使用して、配置された要素を Web ページ上のさまざまな場所に配置します。
< 体 クラス = 「グリッドグリッド-列-3」 >
< ディビジョン クラス = 「相対 h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretchrounded」 >
< ディビジョン クラス = 「絶対左-0 トップ-0 h-16 w-16 bg-blue-400 丸め p-4」 > 項目 1 < / ディビジョン >
< / ディビジョン >
< ディビジョン クラス = 「相対 h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretchrounded」 >
< ディビジョン クラス = 「絶対インセット-x-0 トップ-0 h-16 bg-blue-400 丸め p-4」 > 項目 2 < / ディビジョン >
< / ディビジョン >
< ディビジョン クラス = 「相対 h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretchrounded」 >
< ディビジョン クラス = 「絶対インセット-0 bg-blue-400 丸めp-4」 > 項目 3 < / ディビジョン >
< / ディビジョン >
< ディビジョン クラス = 「相対 h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretchrounded」 >
< ディビジョン クラス = 「absolute inset-y-0 right-0 w-16 bg-blue-400rounded p-4」 > 項目 4 < / ディビジョン >
< / ディビジョン >
< ディビジョン クラス = 「相対 h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretchrounded」 >
< ディビジョン クラス = 「絶対下-0 右-0 h-16 w-16 bg-blue-400 丸めp-4」 > 項目 5 < / ディビジョン >
< / ディビジョン >
< / 体 >
上記のコードの説明:
- まず、親「」を5つ作成します。 ディビジョン 」要素を作成し、さまざまな Tailwind CSS クラスを適用して、相対位置、高さ、幅、背景、パディング、マージンなどを設定します。
- 次に、ネストされた「」を作成します。 ディビジョン 各親「div」内の「」要素。配置は、このネストされた「div」要素に対して行われます。
- 次に、tailwind CSS クラス「」を適用します。 絶対 ”、” h ”、” で ”、” バックグラウンド ”、” p '、 そして ' 丸い ” 入れ子になった” をスタイルします ディビジョン ' 要素。
- その後、ネストされた div 1 から 5 までを開始して、「」の新しいクラスを割り当てます。 左-0 上-0 ”、” インセット-x-0 ”、” インセット-0 ”、” inset-y-0 right-0 '、 そして ' 下-0 右-0 ' それぞれ。
- これらのクラスは、ネストされた div 要素の位置を左上隅に設定し、上部の位置をカバーし、親スペース全体をカバーし、右側をカバーし、左下の位置をカバーします。
実行後、div 要素のプレビューは次のようになります。
出力には、配置された要素が目的の位置に配置されていることが示されます。
結論
” トップ |右 |下 |左 Tailwind ユーティリティは、Web ページ上の要素の配置を制御するために使用されます。複数のクラスを使用して各位置をターゲットにし、要件に従って選択した要素をその場所に移動します。これらのクラスは主に、配置された要素を左、右、下、上に配置します。エリア全体をカバーしたり、左や上などの特定の方向をカバーしたりするのに役立ちます。この記事では、配置された要素の配置を制御するために使用できるユーティリティについて説明しました。