Le modèle Flexbox en CSS3

• Le code était très lourd et illisible. Même pour une maquette de site simple, il était souvent nécessaire d’imbriquer plusieurs tables.
• Problème de respect des standards et de la sémantique : les tableaux servent à présenter des données tabulaires et non pas à faire de la mise en page.
• Problème avec le design adaptatif : les tableaux ne s’adaptent pas facilement à toutes les tailles d’écran.

Avec l’arrivée des CSS, on a commencé à utiliser des “boîtes” et les propriétés float et clear. Il existe plusieurs modèles de boîtes classiques : “block”, “inline” et “inline-block”. Mais ce type de boîte à plusieurs limites :

• L’alignement des éléments horizontalement est possible avec inline-block, mais on obtient un espace blanc entre les éléments.
• On ne peut pas centrer plusieurs blocs verticalement.
• On ne peut pas définir l’ordre des éléments dans un conteneur.

Pour surmonter ces limites, CSS3 a intégré un nouveau modèle de boîte : Flexbox ou “boîte flexible”.

Flexbox propose une façon plus efficace de disposer et d’aligner les boîtes, de distribuer l’espace entre les items d’un conteneur même lorsque leurs dimensions sont inconnues, et surtout lorsque l’on doit gérer différentes tailles d’affichage.

Notions de base

Une FlexBox est constituée d’un conteneur parent dénommé “conteneur flexible” (flex-container). Ses enfants directs deviennent automatiquement des “flex-item”, sans aucune déclaration CSS.

Propriétés du parent

display : flex | inline-flex.
Cette propriété peut avoir les valeurs : flex ou inline-flex, elle permet de définir un conteneur flexible, tous les enfants directs sont alors considérés comme des flex-item.

.container {
    display: flex;
}

flex-direction : row | row-reverse | column | column-reverse.
row : (valeur par défaut) de gauche à droite,
row-reverse : de droite à gauche,
column : du haut en bas,
column-reverse : du bas vers le haut.

flex-wrap : nowrap | wrap | wrap-reverse.
Par défaut, les éléments flexibles vont être disposés sur une seule ligne. On peut changer cela avec la propriété flex-wrap.

flex-flow :
Cette propriété est un raccourci des propriétés flex-direction et flex-wrap, la valeur par défaut : row nowrap.

justify-content : flex-start | flex-end | center | space-between | space-around.
Cette propriété permet de gérer la distribution des éléments sur l’axe principal.

align-items : flex-start | flex-end | center | baseline | stretch.
Cette propriété permet de gérer la distribution des éléments sur l’axe horizontal.

align-content : flex-start | flex-end | center | space-between | space-around | stretch.
Cette propriété permet de gérer l’alignement des lignes à l’intérieur du conteneur.

Propriétés des enfants

order : nombre entier.
Par défaut les éléments sont ordonnés par ordre d’arrivée.

flex-grow : (par défaut = 0).
Cette propriété permet de définir la possibilité pour un item de grandir.

flex-shrink : (par défaut = 1).
Cette propriété permet de définir la possibilité pour un item de se rétrécir.

flex-basis : | auto (par défaut = auto).
La propriété flex-basis définit la taille par défaut d’un élément.

flex : none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ].
Cette propriété est le raccourci de flex-grow, flex-shrink et flex-basis.

Conclusion

Flexbox permet de résoudre beaucoup de difficultés de mise en page, mais l’implémentation dans toutes les versions de navigateurs reste problématique, même si la plupart des propriétés Flexbox sont reconnues par les dernières versions. Au final, Flexbox vaut vraiment le détour.

Can I use