La gestion des mises en page Flexbox peut être complexe sans une approche structurée.
Sans une bonne maîtrise, cela peut conduire à des designs désordonnés et inefficaces.
Cet article vous guidera à travers l’utilisation des classes Tailwind pour simplifier et optimiser vos mises en page Flexbox.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
On retourne maintenant à notre documentation bien aimée cette fois-ci nous allons lui donner à manger les classes Tailwind que nous venons de voir sur Flexbox. Mais avant toute chose, comme toujours, retrouver ci-bas la base de notre code que vous allez ajouter dans votre documentation :
- Code
<! --Insérer ce code dans votre documentation -->
<h2 id="mise-en-page-avec-flexbox" class="rb-heading-index-1 text-center font-bold text-xl mb-3">Mise en page avec Flexbox </h2>
<section class="bg-white w-3/4 m-auto p-3 border-2 rounded-xl mb-10">
<div class="flex justify-between border-b-2">
<p class="font-bold">Propriété</p>
<p class="font-bold">class</p>
</div>
<! –La partie conteneur -->
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<! –La partie contenus -->
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
<div class="flex justify-between border-b-2">
<p>Propriété</p>
<p>class</p>
</div>
</section>
- CodePen :
CodePen : Retrouver la base du code pour la documentation via le lien ci-dessous :
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Bien, à présent, commençons les hostilités avec les classes dédiées au conteneur.
Utiliser Classes Tailwind Flexbox
Tout à l’heure, nous avons vu 5 propriétés qui nous permettent de gérer un conteneur Flex qui sont les suivants :
• display: flex; : correspond à la classe flex et permet d’activer le mode Flexbox sur un conteneur, transformant ses enfants en éléments flexibles.
• flex-direction : correspond aux classes flex-row (disposition horizontale par défaut) ou flex-col (disposition verticale), et permet de définir l’orientation des éléments dans le conteneur.
• flex-wrap : corresponds à la classe flex-wrap , qui permet aux éléments de revenir à la ligne si l’espace est insuffisant. Pour empêcher cela, utilisez flex-nowrap .
• justify-content : corresponds aux classes justify-start , justify-end , justify-center , justify-between , justify-around , ou justify-evenly , et permets d’aligner les éléments le long de l’axe principal avec différentes options d’espacement.
• align-items : correspond à la classe items-{valeur} comme items-start , items-center , ou items-stretch , et permet d’aligner les éléments le long de l’axe secondaire (perpendiculaire à l’axe principal).
Après quelques modifications, notre documentation se retrouve modifiée comme ceci :
- Code :
<h2 id="mise-en-page-avec" class="rb-heading-index-3 text-center font-bold text-xl mb-3">Mise en page avec </h2>
<section class="bg-white w-3/4 m-auto p-3 border-2 rounded-xl mb-10">
<div class="flex justify-between border-b-2">
<p class="font-bold">Propriété</p>
<p class="font-bold">class</p>
</div>
<! –La partie conteneur -->
<div class="flex justify-between border-b-2">
<p>display : flex;</p>
<p>flex</p>
</div>
<div class="flex justify-between border-b-2">
<p>flex-direction</p>
<p>flex-row(-reverse), flex-col(-reverse)</p>
</div>
<div class="flex justify-between border-b-2">
<p>flex-wrap</p>
<p>flex-nowrap, flex-wrap</p>
</div>
<div class="flex justify-between border-b-2">
<p>justify-content</p>
<p>justify-start, justify-end, justify-center, justify-between, justify-around, justivy-evenly</p>
</div>
<div class="flex justify-between border-b-2">
<p>align-items</p>
<p>items-start, items-end, items-center, items-stretch</p>
</div>
<! –La partie contenus -->
- CodePen :
CodePen : Retrouver la documentation avec les classes Tailwind pour gérer les conteneurs :
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment activer le mode Flexbox avec Tailwind ?
Quelles sont les classes pour définir la direction des éléments ?
Comment gérer le wrapping des éléments Flexbox ?
Comment aligner les éléments le long de l'axe principal ?
Quelles classes Tailwind utiliser pour aligner les éléments sur l'axe secondaire ?
Conclusion
En appliquant efficacement les classes Tailwind pour Flexbox, vous pouvez créer des dispositions flexibles et réactives. Quel autre aspect de Tailwind aimeriez-vous explorer pour améliorer vos compétences en développement web ?
