Sommaire

Utiliser le module CSS Flexible Box Layout

1. La mise en page flexible

Le module CSS3 CSS Flexible Box Layout Module Level 1 va nous permettre de résoudre de nombreux problèmes de mise en forme et de mise en page. Ce module permet de créer des mises en forme de parties bien distinctes de nos pages. Les conteneurs parents flexibles vont parfaitement positionner des éléments enfants horizontalement ou verticalement, sans les problèmes qu’apporte la technique des blocs flottants. Ces éléments enfants vont être parfaitement alignés selon les axes horizontaux et verticaux. De plus, nous pourrons contrôler les espaces entre ces éléments enfants et à nouveau selon les axes horizontaux et verticaux.

Le module CSS3 CSS Flexible Box Layout Module Level 1 est à mi-parcours de son processus de finalisation. Il est actuellement (en juillet 2020) en Candidate Recommendation, au 19 novembre 2018 : https://www.w3.org/TR/css-flexbox-1/

En ce qui concerne la compatibilité de ce module CSS avec les navigateurs récents, elle est tout simplement excellente. Voilà le tableau récapitulatif du site référence Can I Use : 

images/C3-9-001.png

2. Les conteneurs flexibles

Une mise en page flexible se crée avec l’utilisation d’un conteneur qui possède la propriété CSS d’affichage display. Cette propriété accepte les valeurs flex ou inline-flex. Ce conteneur est alors considéré ...