フレックスボックスまたはフレックスコンテナは、ユーザーがコンテナ内で要素を整列および分散できるようにするレイアウトです。 Tailwind CSS は、フレックスボックスを作成して操作するためのさまざまなユーティリティ クラスを提供します。ボックスレベルのフレックスコンテナは、ブロックレベルの要素のように動作/動作し、ブロックを作成するフレックスコンテナです。これは親要素の幅全体を占め、それ自体の後に新しい行を作成します。
この記事では、Tailwind でブロックレベルのフレックス コンテナーを作成する方法を例示します。
Tailwind でブロックレベルのフレックスコンテナを作成/作成するにはどうすればよいですか?
Tailwind で特定のブロックレベルのフレックス コンテナーを作成するには、HTML 構造を作成します。次に、「」を追加します。 フレックス 」ユーティリティ クラスに目的の
構文
< ディビジョン クラス = 「フレックス…」 >
...
ディビジョン >
コード
< 体 >
< ディビジョン クラス = 「フレックス ギャップ-2 m-2 ボーダー-2 ボーダー-ブラック」 >
< ディビジョン クラス = 「bg- yellow-500 p-4」 > 最初のアイテム ディビジョン >
< ディビジョン クラス = 「bg- yellow-500 p-4」 > 2 番目の項目 ディビジョン >
< ディビジョン クラス = 「bg- yellow-500 p-4」 > 3番目の項目 ディビジョン >
ディビジョン >
体 >
ここでは、親
-
- 「 フレックス 」クラスは、ブロックレベルのフレックスコンテナを作成するために利用されます。
- 「 ギャップ-2 ” クラスは、flex の子要素間に 2 単位の間隔を追加します。
- 「 m-2 」クラスは、コンテナの四辺に 2 単位のマージンを追加します。
- 「 ボーダー2 ” クラスは、幅 2 単位の境界線をコンテナに追加します。
- 「 ボーダーブラック ”クラスは境界線の色を黒に設定します。
子 flex 要素内:
-
- 「 BG-イエロー-500 」クラスは、フレックス項目の背景に黄色を適用します。
- 「 p-4 ” クラスは、フレックス項目のすべての側面に 4 単位のパディングを追加します。
出力
上記の出力では、境界線はコンテナがブロックレベルのフレックス コンテナであり、その親要素 (ブラウザ) の幅全体を占めることを表しています。
あるいは、ユーザーは Web ページ上のフレックス コンテナー要素を検査してこれを確認できます。
上記の出力は、コンテナーがブロックレベルのフレックス コンテナーであることを示しています。
結論：
Tailwind でブロックレベルのフレックス コンテナーを作成するには、「 フレックス ” ユーティリティ クラスを特定のコンテナで使用し、その子要素を指定します。ユーザーは、ニーズに応じてフレックス項目を定義および変更できます。検証するには、コンテナに境界線を追加して Web ページを表示するか、Web ページ上のその要素を検査します。この記事では、Tailwind でブロックレベルのフレックス コンテナーを作成する方法を説明しました。