Flexbox est un moyen de disposer, d'aligner et de distribuer efficacement des éléments sur une page. Si vous souhaitez en savoir plus sur Flexbox et comment l'utiliser à votre guise, il existe de nombreuses bonnes documentations sur le Web (y compris cet article CSS Tricks (en) et cette spécification MDN).
Une chose à noter est que ce système utilise un modèle de disposition en boîte flexible, qui peut ne pas bien fonctionner avec notre modèle de grille traditionnel qui se base sur le modèle de disposition en tableau. Cela signifie que, selon les besoins, vous ne pourrez peut-être pas utiliser les classes flex et et les classes d'autres dispositions sur le même élément.
Les classes Flex display, telles que jdb-flex et jdb-inline-flex, sont des outils puissants en CSS3 qui permettent de créer des mises en page flexibles et réactives pour les éléments HTML.
Une de ces deux classes (jdb-flex et jdb-inline-flex) doit être utilisé pour sur le conteneur principal (parent) afin de pouvoir utiliser les autres classes flex, que ce soit pour le parent ou pour ses enfants (voir les exemples de code ci-dessous).
La classe jdb-flex est principalement utilisée pour transformer un élément en un conteneur flexible. Lorsqu'un élément est affecté par cette classe, il devient un conteneur principal pour ses éléments enfants, qui peuvent être organisés horizontalement ou verticalement, en fonction des propriétés flexbox que vous appliquez.
La classe jdb-inline-flex, quant à elle, est utilisée de manière similaire, mais elle s'applique aux éléments en ligne, tels que des liens ou des en-têtes de texte, permettant de les disposer de manière flexible tout en conservant leur affichage en ligne.
<div class="container">
Un peu de texte
<div class="parent jdb-flex">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>Un conteneur flex permet de disposer son contenu dans n'importe quelle direction et ordre, remplaçant ainsi des méthodes plus complexes comme les flottants. Les classes jdb-flex-direction et jdb-flex-wrap permettent de contrôler l'ordre et l'orientation des éléments enfants d'un conteneur flexible.
La propriété flex-direction indique comment les éléments flex sont organisés dans le conteneur flex en précisant l'orientation de l'axe principal. Cela décide la direction dans laquelle les éléments flex sont alignés.
<div class="parent jdb-flex jdb-flex-row" style="height:250px"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
La propriété flex-wrap contrôle si le conteneur flexible est monoligne ou multiligne, ainsi que la direction de l'axe transversal, qui détermine la direction dans laquelle les nouvelles lignes sont empilées.
<div class="parent jdb-flex jdb-flex-nowrap" style="height:250px"> <div class="child" style="width:40%"></div> <div class="child" style="width:40%"></div> <div class="child" style="width:40%"></div> <div class="child" style="width:40%"></div> </div>
Les éléments flexibles sont, par défaut, affichés et disposés dans le même ordre que celui dans lequel ils apparaissent dans le code source. Les classes jdb-order-{ordre} peuvent être utilisée pour modifier cet ordre.
Sauf indication contraire dans une future spécification du W3C, cette propriété n'a aucun effet sur les boîtes qui ne sont pas des éléments flexibles.
Par défaut, JdB.CSS fournit les classes jdb-order-first, jdb-order-last, jdb-order-none et jdb-order-{nombre} pour les nombres de 1 à 12. Vous pouvez personnaliser ces valeurs en définisant votre propre style.
<div class="parent jdb-flex jdb-flex-space-between"> <div class="child"></div> <div class="child"></div> <div class="child jdb-order-first"></div> <div class="child"></div> </div>
Les propriétés d'alignement en flexbox, telles que justify-content, align-items et align-self, permettent de contrôler la position des éléments flex à l'intérieur de leurs conteneurs.
La propriété justify-content contrôle l'alignement horizontal des éléments flex dans un conteneur flex et est très utile pour distribuer l'espace libre horizontalement entre les éléments flex.
<div class="parent jdb-flex jdb-flex-start" style="height:250px"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
La propriété align-items contrôle l'alignement vertical des éléments flex dans un conteneur flex et est très utile pour distribuer l'espace libre verticalement entre les éléments flex.
<div class="parent jdb-flex jdb-flex-center" style="height:250px"> <div class="child">Lorem ipsum, dolor</div> <div class="child">Sit amet consectetur adipisicing</div> <div class="child">Odit ut</div> <div class="child">Aperiam, odit ut tempore</div> </div>
Les propriétés de flexibilité, telles que flex-grow, flex-shrink et flex-basis, permettent de contrôler la taille des éléments flex à l'intérieur de leurs conteneurs.
Remarque : JdB.CSS offre quelques classes pour agrandir et rétrécir les éléments ou éviter ces deux cas. Pour toute personnalisation, il est conseillé de créer votre propre style pour personnaliser les valeurs non fournies par JdB.CSS.
<div class="parent jdb-flex" style="height:250px"> <div class="child"></div> <div class="child"></div> <div class="child jdb-flex-item-grow"></div> <div class="child"></div> </div>