この記事では、Tailwind CSS で flex アイテムがラップされないようにする方法を説明します。
Tailwind での Flex アイテムのラップを防止/停止する方法は?
Tailwind でフレックス項目がラップされないようにするには、HTML ファイルを作成します。次に、HTML プログラムのフレックス コンテナで「flex-nowrap」ユーティリティを使用して、フレックス項目が折り返されないようにします。次に、HTML Web ページを表示して変更を確認します。
理解を深めるために、以下の手順を試してみてください。
ステップ 1: Flex アイテムが HTML プログラムでラップされないようにする
HTMLプログラムを作成し、「 フレックスナラップ 」ユーティリティを目的のフレックス コンテナーで使用して、フレックス項目がラップされるのを防ぎます。
< 体 >
< ディビジョン クラス = 「フレックスフレックスナラップh-40」 >
< ディビジョン クラス = 「basis-1/4 bg-red-500 m-1」 > 1 < / ディビジョン >
< ディビジョン クラス = 「basis-1/3 bg- yellow-500 m-1」 > 2 < / ディビジョン >
< ディビジョン クラス = 「basis-1/2 bg-teal-500 m-1」 > 3 < / ディビジョン >
< / ディビジョン >
< / 体 >
ここ：
- 「 フレックス ” クラスにより、フレックスボックス レイアウトが有効になります。 要素を配置し、子要素を配置して整列させることができます。
- 「 フレックスナラップ ” クラスは、フレックス項目が複数行に折り返されず、すべてのフレックス項目を 1 行に保持することを指定します。
- ” 基底-1/4 ”、” 基準-1/3 '、 と ' 基底-1/2 ” クラスは内部を設定します
の幅は、それぞれ親要素の 25%、33.33%、50% になります。
ステップ 2: 出力を確認する
フレックス項目がラップされていないことを確認するには、HTML Web ページを表示します。
上記の Web ページでは、フレックス項目は 1 行であり、折り返されていません。
結論
Tailwind でフレックス項目がラップされないようにするには、HTML プログラム内の目的のフレックス コンテナーで「flex-nowrap」ユーティリティを利用します。このユーティリティは、フレックス項目のラップを防ぎます。確認するには、Web ページ上の変更を確認してください。この記事では、フレックス項目が Tailwind CSS でラップされないようにする方法を説明しました。