この記事ではTailwind CSSでフレックスベーシスを設定する方法を解説します。
Tailwind で Flex Basis を設定するにはどうすればよいですか?
Tailwind CSS でフレックスベースを設定するには、HTML ファイルを作成します。次に、「」を使用します。 基準-<サイズ> 」ユーティリティ クラスを HTML プログラム内で使用し、フレックス項目のサイズを指定します。このユーティリティは、フレックス項目の初期サイズを設定します。変更を確認するには、Web ページを表示してください。
実際のデモンストレーションとして、指定された手順を見てください。
ステップ 1: HTML プログラムで Flex Basis を設定する
HTMLプログラムを作成し、「 基準-<サイズ> 」ユーティリティ クラスを使用して、フレックス項目のサイズを設定します。たとえば、「」を使用しました。 基底-1/4 ”、” 基準-1/3 '、 と ' 基底-1/2 」ユーティリティを使用して 3 つのフレックス項目を設定します。
< 体 >
< ディビジョン クラス = 「フレックスH-20」 >
< ディビジョン クラス = 「basis-1/4 bg-red-400 m-1」 > 1 < / ディビジョン >
< ディビジョン クラス = 「basis-1/3 bg-teal-400 m-1」 > 2 < / ディビジョン >
< ディビジョン クラス = 「basis-1/2 bg-orange-400 m-1」 > 3 < / ディビジョン >
< / ディビジョン >
< / 体 >
ここ：
- 「 フレックス 」クラスは、柔軟なレイアウトを作成し、利用可能なスペースに基づいて子要素のサイズを調整するために使用されます。
- 「 h-20 ” クラスは、の高さを 20 単位に設定します。
- 「 基底-1/4 」クラスは、内側の
要素の幅を親要素の 25% に設定します。- 「 基準-1/3 」クラスは、内側の
の幅を親コンテナの 33.33% に設定します。- 「 基底-1/2 」クラスは、
の幅を親コンテナの 50% に設定します。- 「 bg-レッド-400 ” クラスは
に赤い背景色を適用します。- 「 bg-ティール-400 ” クラスは、
の背景に青緑色を設定します。- 「 bg-オレンジ-400 ” クラスは、オレンジ色の背景色を
に適用します。- 「 m-1 ” クラスは、各
要素の周囲に 1 単位のマージンを追加します。ステップ 2: 出力を確認する
フレックスベースが設定され、正しく動作していることを確認するには、HTML Web ページを表示します。
上記の出力では、スタイルに応じて flex-basis が表示されます。
結論
Flex ベースにより、ユーザーはさまざまな画面サイズや解像度に合わせて柔軟なレイアウトを作成できます。 Tailwind CSS でフレックスベースを設定するには、「 基準-<サイズ> 」ユーティリティクラスはHTMLプログラムで使用されます。ユーザーはフレックス項目のサイズを指定し、Web ページを表示して変更を確認する必要があります。この記事ではTailwind CSSでフレックスベーシスを設定する方法を解説しました。
- 「 基底-1/4 」クラスは、内側の