Flexbox ou conteneur flexible est une mise en page qui permet aux utilisateurs d'aligner et de distribuer des éléments dans un conteneur. Tailwind CSS propose diverses classes d'utilitaires pour créer et travailler avec flexbox. Un conteneur flexible au niveau de la boîte est un conteneur flexible qui se comporte/agit comme un élément au niveau du bloc et crée un bloc. Il prend toute la largeur de son élément parent et crée une nouvelle ligne après lui-même.
Cet article illustrera la méthode de création d'un conteneur flexible au niveau du bloc dans Tailwind.
Comment créer/créer un conteneur flexible au niveau du bloc dans Tailwind ?
Pour créer un conteneur flexible particulier au niveau du bloc dans Tailwind, créez une structure HTML. Ensuite, ajoutez le ' fléchir ” classe utilitaire avec le
Syntaxe
< div classe = 'fléchir ...' >
...
div >
Code
< corps >
< div classe = 'flex gap-2 m-2 bordure-2 bordure-noir' >
< div classe = 'bg-jaune-500 p-4' > Premier article div >
< div classe = 'bg-jaune-500 p-4' > Deuxième élément div >
< div classe = 'bg-jaune-500 p-4' > Troisième élément div >
div >
corps >
Ici, dans le conteneur parent
-
- ' fléchir ” est utilisée pour créer un conteneur flexible au niveau du bloc.
- ' écart-2 ” ajoute 2 unités d'espacement entre les éléments enfants de flex.
- ' m-2 ” classe ajoute 2 unités de marge à tous les côtés du conteneur.
- ' frontière-2 ” ajoute la bordure au conteneur avec une largeur de 2 unités.
- ' bordure noire ” La classe définit la couleur de la bordure sur le noir.
Dans les éléments flexibles enfants :
-
- ' bg-jaune-500 ” classe applique une couleur jaune à l'arrière-plan de l'élément flexible.
- ' p-4 ” ajoute le rembourrage de 4 unités sur tous les côtés des éléments flexibles.
Sortir
Dans la sortie ci-dessus, la bordure indique que le conteneur est un conteneur flexible au niveau du bloc, qui occupe toute la largeur de son élément parent (navigateur).
Alternativement, l'utilisateur peut s'en assurer en inspectant l'élément de conteneur flexible sur la page Web :
La sortie ci-dessus indique que le conteneur est un conteneur flexible de niveau bloc.
Conclusion:
Pour créer un conteneur flexible au niveau du bloc dans Tailwind, il est nécessaire d'ajouter le ' fléchir ” classe utilitaire avec le conteneur particulier et spécifiez ses éléments enfants. Les utilisateurs peuvent définir et modifier des éléments flexibles en fonction de leurs besoins. Pour vérification, ajoutez la bordure au conteneur et affichez la page Web ou inspectez cet élément sur la page Web. Cet article a expliqué la méthode de création d'un conteneur flexible au niveau du bloc dans Tailwind.