Flexbox CSS Layout est un modèle de mise en page permettant d’afficher les éléments de contenu d’une page web en boîtes flexibles. Avec ses diverses propriétés, Flexbox est une alternative intéressante par rapport au modèle de mise en page Float. En effet, le contrôle de l’alignement, la direction, la taille et l’ordre des boîtes de contenu se fait aisément.
Exemple pratique avec un conteneur div
et 4 conteneurs enfants div
.
Et une feuille de style associée.
La lecture de la page peut se faire en ligne – row ou en colonne – column. Ce sens de lecture définira l’axe principal de votre page.
Par exemple : l’axe principal d’une organisation des éléments enfants en ligne est horizontal, l’axe secondaire est l’axe vertical. C’est l’inverse si les éléments enfants sont organisés en colonne, l’axe secondaire est l’axe horizontal.
Cette propriété s’utilise pour définir l’alignement horizontal et les espaces entre chacun des éléments enfants
répartis sur l’axe principal.
Cette propriété d’alignement s’utilise sur l’axe secondaire.
Par défaut, tous les éléments enfants se placent sur une seule ligne. Lorsque ces éléments enfants sont trop larges (espacement intérieur – padding, ou extérieur – margin) pour leur conteneur parent, ils débordent de celui-ci.
La propriété flex-wrap permet de gérer les retours à la ligne, grâce aux valeurs suivantes.
Cette propriété permet d’aligner les éléments enfants sur l’axe secondaire. Son rôle et les valeurs sont les mêmes que pour la propriété justify-content qui affecte l’axe principal.
Cette propriété permet d’associer les propriétés et les valeurs de flex-direction (axe-principal) et de flex-wrap (axe-secondaire) en une seule ligne de css. Par défaut cette propriété prend les valeurs suivantes : flex-flow : row nowrap
. Le flux s’affiche en ligne, sans passage à la ligne.
Cette propriété permet d’affecter un ordre d’affichage aux éléments enfant et ce quel que soit leur ordre d’écriture dans le flux html. La valeur par défaut est 0. Les valeurs affectées sont des nombres entiers.
Cette propriété permet d’affecter un alignement spécifique sur l’axe secondaire à un ou plusieurs éléments enfants indépendamment de l’alignement défini dans le conteneur parent. Les valeurs prises sont les même que pour align-items (strecth : valeur par défaut, flex-start, flex-end et center).
Cette propriété permet d’augmenter la taille relative d’un ou plusieurs éléments par rapport aux entres enfants de l’élément parent.
Exemples :
A l’inverse de flex-grow, flex-shrink permet de réduire la taille d’un ou plusieurs éléments enfants.
Exemples :
Cette propriété définit la taille de base des élément enfants, l’espace disponible restant sera occupé en fonction des facteurs de flexibilité. Si l’axe principal est horizontal (row) cela correspond à une largeur, si l’axe principal est vertical (column) cela correspond à une hauteur.
Comme pour les propriétés css classiques de width ou height, les valeurs acceptées sont de type longueur absolue ou relative (px, %, rem, em). La valeur par défaut étant auto, cette propriété accepte aussi les valeurs de content (selon le contenu), initial et inherit.
Exemple :
C’est une propriété raccourcie de flex-grow, flex-shrink et flex-basis. Les valeurs automatiques, sans autres précisions sont : flex : 1 1 auto ;
Tester votre mise en page flex avec l’outil : flexbox.help