Flexible Box Layout Module”, mieux connue sous le nom de “Flexbox”, est une spécification CSS 3 du W3C qui définit un modèle de boîte et de positionnement jusqu’alors inédit.
Il intègre une gestion naturelle de la fluidité des éléments et du Responsive, propose une alternative à l’usage de grilles d’affichage complexes, voire de frameworks – véritables usines à gaz où l’on n’exploite qu’à peine 10% de l’outil.
Outre la simplification des schémas de positionnement, Flexbox apporte des solutions parfaites à une problématique bien ancrée dans notre époque : le Responsive Webdesign.
Le design d’éléments flexibles, la réorganisation des blocs ainsi que la faculté à basculer très aisément d’un mode d’affichage horizontal vers un mode vertical en font un allié formidable dans nos projets d’adaptation aux tablettes et smartphones.
Flexbox est une spécification CSS 3 novatrice. Flexbox a été pensé et optimisé pour faire table rase de toutes les techniques bancales historiques de positionnement et des contournements de propriétés qui pullulent dans nos projets web.
Les “anciennes” méthodes encore (mal) utilisées de nos jours pour aligner ou placer des éléments ne sont souvent rien d’autre que du bricolage empirique : “tiens, à quoi peut bien servir cette position : relative ?”, “pas grave, je mets une classe .clearfix partout !”, “oh ! mais pourquoi ça ne veut pas rentrer ?”, etc.
Flexbox est conçu pour mettre de l’ordre dans tout ce maelström de bidouilles et revenir enfin aux bases d’un positionnement propre et adapté aux besoins actuels.
Sources : Raphaël Goetter
La propriété CSS FlexBox Parente JUSTIFY-CONTENT permet de positionner les blocs enfants sur l’axe horizontal.
/* CSS justify-content: flex-start | flex-end | center | space-between | space-around */
.conteneur {display:flex; justify-content:center;}
La propriété justify-content accepte 5 valeurs :
flex-start (par défaut) : les items sont regroupés au début de la ligneflex-end : les items sont regroupés à la fin de la lignecenter : les items sont regroupés au centre de la lignespace-between : les items sont répartis de manière égale sur la ligne ; le premier est au début de la ligne, le dernier est à la finspace-around : les items sont répartis de manière égale sur la ligne avec le même espacement entre chacuneLe schéma suivant permet de mieux comprendre la façon dont les lignes s’empilent dans un container flexible selon la valeur donnée à justify-content :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
La propriété CSS FlexBox Parente ALIGN-ITEMS permet de positionner les blocs enfants sur l’axe vertical.
La propriété align-items est une sous-propriété du module Flexible Box Layout (Flexbox).
La propriété align-items accepte 5 valeurs :
flex-start : le premier bord (début) des items est placé au début de la ligne transversaleflex-end : le dernier bord (fin) des items est placé à la fin de la ligne transversalecenter : les items sont regroupés au centre de l’axe transversalbaseline : les items sont répartis de manière à ce que leur ligne de base s’alignestretch (par défaut) : les items s’étirent de façon à remplir le conteneur (tout en respectant min-width/max-width)Le schéma suivant permet de mieux comprendre la façon dont les flex-items sont disposés selon la valeur donnée à align-items :
La propriété flex-wrap définit si le contenu sera distribué sur une seule ligne (ou colonne selon l’axe principal) ou sur plusieurs lignes. En clair, si les “flex-items” ont le droit de passer à la ligne ou non.
Les valeurs de flex-wrap sont :
nowrap (les éléments ne passent pas à la ligne, valeur par défaut)wrap (les éléments passent à la ligne dans le sens de lecture)wrap-reverse (les éléments passent à la ligne dans le sens inverse)