Flexbox o contenidor flexible és un disseny que permet als usuaris alinear i distribuir elements dins d'un contenidor. Tailwind CSS ofereix diverses classes d'utilitat per crear i treballar amb flexbox. Un contenidor flexible a nivell de caixa és un contenidor flexible que es comporta/actua com un element a nivell de bloc i crea un bloc. Ocupa tota l'amplada del seu element pare i fa una nova línia després de si mateix.
Aquest escrit exemplificarà el mètode per crear un contenidor flexible a nivell de bloc a Tailwind.
Com crear/crear un contenidor flexible a nivell de bloc a Tailwind?
Per crear un contenidor flexible a nivell de bloc concret a Tailwind, feu una estructura HTML. A continuació, afegiu el ' flexionar ” classe d'utilitat amb el
Sintaxi
< div classe = 'flexió...' >
...
div >
Codi
< cos >
< div classe = 'flex gap-2 m-2 vora-2 vora-negre' >
< div classe = 'bg-groc-500 p-4' > Primer article div >
< div classe = 'bg-groc-500 p-4' > Segon article div >
< div classe = 'bg-groc-500 p-4' > Tercer ítem div >
div >
cos >
Aquí, al contenidor
-
- “ flexionar La classe s'utilitza per crear un contenidor flexible a nivell de bloc.
- “ buit-2 La classe afegeix 2 unitats d'espai entre els elements secundaris de flex.
- “ m-2 La classe afegeix 2 unitats de marge a tots els costats del contenidor.
- “ frontera-2 ” La classe afegeix la vora al contenidor amb 2 unitats d'amplada.
- “ vora-negre ”La classe estableix el color de la vora en negre.
En els elements flexibles infantils:
-
- “ bg-groc-500 ”La classe aplica un color groc al fons de l'element flexible.
- “ pàg-4 La classe afegeix el farciment de 4 unitats a tots els costats dels elements flexibles.
Sortida
A la sortida anterior, la vora representa que el contenidor és un contenidor flexible a nivell de bloc, que ocupa tota l'amplada del seu element pare (navegador).
Alternativament, l'usuari pot assegurar-ho inspeccionant l'element del contenidor flexible a la pàgina web:
La sortida anterior indica que el contenidor és un contenidor flexible a nivell de bloc.
Conclusió:
Per crear un contenidor flexible a nivell de bloc a Tailwind, cal afegir el ' flexionar ” classe d'utilitat amb el contenidor particular i especifiqueu els seus elements fills. Els usuaris poden definir i modificar elements flexibles segons les seves necessitats. Per a la verificació, afegiu la vora al contenidor i visualitzeu la pàgina web o inspeccioneu aquest element a la pàgina web. Aquest article ha explicat el mètode per crear un contenidor flexible a nivell de bloc a Tailwind.