Flexbox of flex container is een lay-out waarmee gebruikers elementen binnen een container kunnen uitlijnen en verdelen. Tailwind CSS biedt verschillende hulpprogrammaklassen om flexbox te maken en ermee te werken. Een flexcontainer op boxniveau is een flexcontainer die zich gedraagt/gedraagt als een element op blokniveau en een blok maakt. Het neemt de volledige breedte van het bovenliggende element in beslag en maakt een nieuwe regel achter zichzelf.
Dit artikel illustreert de methode voor het maken van een flexcontainer op blokniveau in Tailwind.
Hoe maak / maak ik een flexcontainer op blokniveau in Tailwind?
Maak een HTML-structuur om een bepaalde flexcontainer op blokniveau in Tailwind te maken. Voeg vervolgens de ' buigen ” utility class met de gewenste
Syntaxis
< div klas = 'flex...' >
...
div >
Code
< lichaam >
< div klas = 'flex gap-2 m-2 border-2 border-zwart' >
< div klas = 'bg-geel-500 p-4' > Eerste artikel div >
< div klas = 'bg-geel-500 p-4' > Tweede artikel div >
< div klas = 'bg-geel-500 p-4' > Derde artikel div >
div >
lichaam >
Hier, in de bovenliggende
-
- “ buigen ” class wordt gebruikt om een flexcontainer op blokniveau te maken.
- “ kloof-2 ” klasse voegt 2 afstandseenheden toe tussen de onderliggende elementen van flex.
- “ m-2 ”klasse voegt 2 eenheden marge toe aan alle zijden van de container.
- “ grens-2 ” klasse voegt de rand toe aan de container met 2 eenheden breedte.
- “ border-zwart ” klasse stelt de randkleur in op zwart.
In de kinderflexelementen:
-
- “ bg-geel-500 ” class past een gele kleur toe op de achtergrond van het flexitem.
- “ p-4 ” class voegt de opvulling van 4 eenheden toe aan alle zijden van de flex-items.
Uitgang
In de bovenstaande uitvoer geeft de rand aan dat de container een flexcontainer op blokniveau is, die de volledige breedte van het bovenliggende element (browser) in beslag neemt.
Als alternatief kan de gebruiker dit verzekeren door het flex-containerelement op de webpagina te inspecteren:
De bovenstaande uitvoer geeft aan dat de container een flexcontainer op blokniveau is.
Conclusie:
Om een flexcontainer op blokniveau aan te maken in Tailwind, is het vereist om de ' buigen 'utility class met de specifieke container en geef de onderliggende elementen op. Gebruikers kunnen flexartikelen naar eigen behoefte definiëren en wijzigen. Voeg ter verificatie de rand toe aan de container en bekijk de webpagina of inspecteer dat element op de webpagina. In dit artikel is de methode uitgelegd voor het maken van een flexcontainer op blokniveau in Tailwind.