Cet article illustrera la méthode pour commander des éléments flexibles et de grille dans Tailwind CSS.
Comment commander des éléments Flex et Grid dans Tailwind ?
Pour commander des éléments flexibles et de grille dans Tailwind CSS, créez un fichier HTML. Ensuite, utilisez l'utilitaire 'order-' et spécifiez la valeur de commande dans le programme HTML pour modifier l'ordre des éléments flexibles et de la grille. Il permet aux éléments flexibles d'être rendus dans un ordre différent de celui dans lequel ils s'affichent dans le DOM (Document Object Model). Pour garantir les modifications, consultez la page Web HTML.
Regardez les étapes données-fournies pour une meilleure compréhension:
Étape 1 : Commander des éléments Flex et Grid dans le programme HTML
Faites un programme HTML et utilisez le ' commande-
< corps >
< div classe = 'flex h-20' >
< div classe = 'ordre-3 bg-rouge-500 w-32 m-1' > 1 < / div >
< div classe = 'commande-dernière bg-jaune-500 w-32 m-1' > 2 < / div >
< div classe = 'Commander en premier bg-sarcelle-500 w-32 m-1' > 3 < / div >
< div classe = 'commande-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >
< / corps >
Ici:
- ' commande-3 ” définit l'ordre de l'élément sur 3 et l'élément flexible sera positionné comme troisième élément dans le conteneur flexible.
- ' dernière commande ” La classe définit l'ordre de l'élément comme étant le dernier et ce sera le dernier élément dans le conteneur flex.
- ' commander en premier ” classe spécifie l'ordre de l'élément à être premier et il sera positionné comme le premier élément dans le conteneur flex.
- ' commande-2 ” La classe définit l'ordre de l'élément sur 2 et il sera positionné comme deuxième élément dans le conteneur flex.
- ' w-32 ” classe applique 32 unités de largeur à chaque élément flexible.
- ' m-1 ” classe ajoute 1 unité de marge autour de chaque élément flexible.
Étape 2 : vérifier la sortie
Affichez la page Web HTML pour vous assurer que les éléments flexibles et de grille ont été commandés :
On peut observer que les éléments flexibles et de grille ont été commandés avec succès en fonction de leur spécification.
Conclusion
Pour commander des éléments flexibles et de grille dans Tailwind CSS, utilisez le ' commande-