Flexbox est un module de « boites » CSS qui a été conçu pour aider la mise en page des pages web.
Les éléments sont alors considérés comme des boites (ou blocs) que l’on peut facilement disposer sur une ligne ou une colonne.
Flexbox doit être appliqué à l’élément parent pour que l’élément enfant direct puisse en hériter.
Son appel se fait de la façon suivante :
.parent {
display : flex ;
}
.enfant {
propriété : valeur ;
}
Quelles sont ses propriétés ?
Il existe différentes propriétés de Flexbox pour mettre en forme les éléments. Et il est important de bien les placer (dans l’élément parent ou enfant) pour que les règles s’appliquent correctement.
Propriétés de l’élément parent
Les propriétés suivantes sont à mettre dans l’élément parent.
Répartition horizontale
Elle permet de répartir les éléments enfants sur l’axe horizontal.justify-content : flex-start; : commence au début du parent.justify-content : flex-end; : commence par la fin du parent.justify-content : center; : centre horizontalement par rapport au parent.justify-content : space-evenly; : réparti dans tout l’espace du parent.
Répartition verticale
Elle permet de répartir les éléments enfants sur l’axe vertical.align-items : flex-start; : commence en haut du parent.align-items : flex-end; : commence en bas du parent.align-items : center; : centre verticalement par rapport au parent.align-items : stretch; : réparti sur l’axe vertical du parent.
Répartition des éléments entre eux
Elle permet de répartir les éléments enfants les uns par rapport aux autres.flex-direction : row;: les éléments se répartissent sur une ligne dans l’ordre croissant d’écriture.flex-direction : row-reverse; : ils se répartissent sur une ligne dans l’ordre décroissant d’écriture.flex-direction : column; : les éléments se répartissent sur une colonne dans l’ordre croissant d’écriture.flex-direction : column-reverse; : ils se répartissent sur une colonne dans l’ordre croissant d’écriture.
Répartition sur plusieurs lignes
C’est l’empaquetage : les éléments se répartissent en ligne.flex-wrap: nowrap; : tous les éléments sont sur une seule ligne avec un espace équivalent (la taille initiale des éléments n’est plus prise en compte).flex-wrap: wrap; : permet de créer plusieurs lignes. En fonction de leur taille, les éléments passent à la ligne lorsqu’il n’y a pas assez de place.flex-wrap: wrap-reverse; : c’est la même fonction que précédemment, sauf que la ligne se créée au-dessus.
Propriétés de l’élément enfant
Certaines propriétés sont à mettre dans l’élément enfant.
La plus utilisée est la suivante :
Taille
Cette propriété permet de pouvoir ajuster la taille d’un élément précis (après avoir appliqué un flex-grow au préalable).
flex-grow : nombre;
C’est un ratio : tous les éléments ont initialement une taille de « 1 ». Si on applique un flex-grow de 2 sur un élément, cela veut dire que cet élément a 2 fois la taille des autres éléments.
Il existe d’autres propriétés qui sont consultables sur le site css-tricks ou sur celui de MDN.
Pour aller plus loin
Ce module n’est pas encore reconnu par tous les navigateurs, il faut donc ajouter des préfixes pour chaque propriété utilisée (ces derniers sont amenés à disparaître lorsque la règle sera bien intégrée par les navigateurs – vérifiable sur le site shouldiprefix.com).
Les préfixes sont les suivants :-webkit- : pour Chrome et Safari (sachant que Chrome est le navigateur le plus utilisé en France !)-ms- : Internet Explorer, Microsoft Edge-moz- : Firefox-o- : pour les anciennes versions d’Opera
Par exemple :
balise {
-webkit-justify-content : center ;
-ms-justify-content : center ;
justify-content : center ;
}
Great looking internet site. Presume you did a great deal of your own coding.
Thank you Brian ! You’re right, all code I put on my site are my own (after many test of course ! 😉 )
Hope you will continue to enjoy your reading…