Cet article explique la méthode pour définir la base flexible dans Tailwind CSS.
Comment définir la base flexible dans Tailwind ?
Pour définir la base flexible dans Tailwind CSS, créez un fichier HTML. Ensuite, utilisez le ' base-
Regardez les étapes fournies pour une démonstration pratique :
Étape 1 : Définir la base Flex dans le programme HTML
Créez un programme HTML et utilisez le ' base-
< corps >
< div classe = 'flex h-20' >
< div classe = 'base-1/4 bg-rouge-400 m-1' > 1 < / div >
< div classe = 'base-1/3 bg-sarcelle-400 m-1' > 2 < / div >
< div classe = 'base-1/2 bg-orange-400 m-1' > 3 < / div >
< / div >
< / corps >
Ici:
- ' fléchir ' La classe est utilisée pour créer une mise en page flexible et ajuster les tailles de l'élément enfant en fonction de l'espace disponible.
- ' h-20 ” classe définit la hauteur de à 20 unités.
- ' base-1/4 ” classe la largeur de l'élément
interne à 25% de son élément parent.- ' base-1/3 ” classe la largeur du
intérieur à 33,33 % de son conteneur parent.- ' base-1/2 ” classe la largeur de
à 50% de son conteneur parent.- ' bg-rouge-400 ” classe applique une couleur de fond rouge à la
.- ' bg-sarcelle-400 ” classe définit la couleur sarcelle à l'arrière-plan de
.- ' bg-orange-400 ” classe applique la couleur d'arrière-plan orange au
.- ' m-1 ” ajoute une marge de 1 unité autour de chaque élément
.Étape 2 : vérifier la sortie
Pour vous assurer que la base flexible a été définie et fonctionne correctement, consultez la page Web HTML :
Dans la sortie ci-dessus, la base flexible peut être vue en fonction de laquelle elle a été stylisée.
Conclusion
La base flexible permet aux utilisateurs de créer des mises en page flexibles qui s'adaptent à différentes tailles et résolutions d'écran. Pour définir la base flexible dans Tailwind CSS, le ' base-
” La classe utilitaire est utilisée dans le programme HTML. Les utilisateurs doivent spécifier la taille de l'élément flexible et s'assurer des modifications en consultant la page Web. Cet article a expliqué la méthode pour définir la base flexible dans Tailwind CSS. - ' base-1/4 ” classe la largeur de l'élément