CSS: Module FlexBox

Introduction

Le module FlexBox

Le positionnement d'éléments HTML n'est pas toujours évident, et ce, d'autant plus lorsque la taille des éléments ne peut être déterminée et fixée à l'avance.

Le module FlexBox propose une méthode efficace pour disposer des éléments au sein d'un conteneur, même si leurs tailles sont inconnues et/ou dynamiques. Le conteneur peut adapter la largeur, la hauteur voire l'ordre des éléments pour utiliser au mieux l'espace disponible.

Ce module définit une dizaine propriétés. Une fois celles-ci apprises, vous ne pourrez plus vous en passer pour réaliser la mise en page de vos sites web !

Différentes versions de FlexBox

La première version du module a été publiée en juillet 2009. La version actuelle date d'octobre 2017 . (W3C : CSS Flexible Box Layout Module Level 1).

Si vous recherchez des exemples d'utilisation de FlexBox sur Internet, vous risquez de consulter des extraits de codes exploitant une version obsolète du module.

La syntaxe display: box; ou une propriété box-... datent de la version originelle de 2009.

La syntaxe display: flexbox; ou la fonction flex() proviennent d'une version de 2011.

Si par contre, les styles contiennent des display: flex ou une propriété flex-..., la syntaxe utilisée est bien l'actuelle.