Dit artikel illustreert de methode om flex- en rasteritems te bestellen in Tailwind CSS.
Hoe Flex- en Grid-items bestellen in Tailwind?
Maak een HTML-bestand om flex- en rasteritems in Tailwind CSS te bestellen. Gebruik vervolgens het hulpprogramma 'bestellen' en specificeer de bestelwaarde in het HTML-programma om de volgorde van flex- en rasteritems te wijzigen. Hiermee kunnen de flex-items in een andere volgorde worden weergegeven dan ze worden weergegeven in het DOM (Document Object Model). Bekijk de HTML-webpagina om zeker te zijn van wijzigingen.
Bekijk de gegeven stappen voor een beter begrip:
Stap 1: Bestel Flex- en Grid-items in het HTML-programma
Maak een HTML-programma en gebruik de ' order-
< lichaam >
< div klas = 'flex h-20' >
< div klas = 'bestel-3 bg-rood-500 w-32 m-1' > 1 < / div >
< div klas = 'bestel-laatste bg-geel-500 w-32 m-1' > 2 < / div >
< div klas = 'eerste bestelling bg-teal-500 w-32 m-1' > 3 < / div >
< div klas = 'bestel-2 bg-oranje-500 w-32 m-1' > 4 < / div >
< / div >
< / lichaam >
Hier:
- “ bestelling-3 ” klasse stelt de volgorde van het element in op 3 en het flex-item wordt gepositioneerd als het derde item in de flex-container.
- “ bestelling-laatste ” class stelt de volgorde van het element in als de laatste en het zal het laatste item zijn in de flexcontainer.
- “ eerst bestellen ” class specificeert de volgorde van het element dat als eerste moet worden geplaatst en het zal worden gepositioneerd als het eerste item in de flexcontainer.
- “ bestelling-2 ” klasse stelt de volgorde van het element in op 2 en het wordt gepositioneerd als het tweede item in de flexcontainer.
- “ w-32 ” klasse past 32 breedte-eenheden toe op elk flexitem.
- “ m-1 ” class voegt 1 eenheidsmarge toe rond elk flexitem.
Stap 2: uitvoer controleren
Bekijk de HTML-webpagina om er zeker van te zijn dat de flex- en rasteritems zijn besteld:
Geconstateerd kan worden dat de flex- en grid-items succesvol zijn besteld volgens de specificaties.
Conclusie
Om flex- en grid-items in Tailwind CSS te bestellen, gebruikt u de order-