Flexbox : la solution CSS pour simplifier le positionnement des blocs HTML

Flexbox permet d’appréhender les feuilles de style (CSS) plus aisément et notamment le positionnement des blocs (alignement vertical – horizontal – ordre – espacement – remplissage – etc). Afin de mieux comprendre ce qu’est Flexbox, rien de plus simple que la pratique :).

Dans ce billet, nous allons procéder à une « battle » : Alexandre Démoulin VS Georges Damien : le premier fera du flexbox et le second du CSS « classique ». Imaginons donc une maquette cible pour notre futur site internet décrite de la sorte :

  • Un header
  • Un footer
  • Un menu à gauche
  • Un contenu à droite qui se redimensionne automatiquement.

 

Maquette cible

maquette cible

Nous démarrons avec une page contenant nos quatre blocs dont voici le code :

Voir le code pen Cellenza – Flexbox – YPejOO par Alexandre DEMOULIN (@dmeul) sur CodePen.

Comment mettre les éléments en ligne ?

La solution CSS classique (by Georges)

Pour faire les alignements horizontaux, je vais utiliser la propriété CSS « float » avec pour valeur « left ». La contrainte étant de ne pas oublier de rajouter un « clear : both, » afin de recaler à la ligne les autre div.
On peut également utiliser la propriété « display: inline-block ».

Voir le code Pen Cellenza – Flexbox – zxRMLw par Georges Damien (@Djdodjes) sur CodePen.

La solution Flexbox (by Alexandre)

Pour utiliser Flexbox, il suffit de mettre la propriété css « display:flex » sur l’élément parent :

Voir le code pen Cellenza – Flexbox – vEdabQ par Alexandre DEMOULIN (@dmeul) sur CodePen.

Comme on peut le voir les éléments fils sont alignés automatiquement. D’ailleurs, vous pouvez changer la direction dans laquelle les éléments sont alignés à l’aide de la propriété « flex-direction« . Les valeurs possibles sont :

  • row
  • row-reverse
  • column
  • column-reverse

Par défaut, la valeur est fixée à « row », ce qui fait que l’on aurait pu écrire le code suivant :

.contenair{
  display: flex;
  flex-direction: row;
}

 

Bilan

Georges : A ce stade, je dirais que la solution Flexbox semble être plus facile à implémenter. Cela dit, le mécanisme du « float : left » est une solution assez facile qu’on se doit de connaître si l’on fait régulièrement du CSS. L’inconvénient est que l’on est obligé d’appliquer à chaque « div » contenu dans le « container » la propriété « float » voulue.
Alex : Certes la propriété « float » peut avoir ses avantages dans certains cas, mais là, il faut avouer que flexbox est carrément plus facile.

 

Comment afficher les éléments en colonne ?

La solution CSS classique

Par défaut, les « div » successives sont alignées verticalement. Dans ce cas, aucun besoin particulier si ce n’est d’imbriquer les « div » les unes à la suite des autres :

Voir le code Pen Cellenza – Flexbox – azYmPQ par Georges Damien (@Djdodjes) sur CodePen.

La solution Flexbox

Si l’on utilise la valeur « flex-direction:column« , cela nous donne le résultat suivant :

Voir le code pen Cellenza – Flexbox – MYQBRJ par Alexandre DEMOULIN (@dmeul) sur CodePen.

Bilan

Georges: Aucun besoin particulier pour aligner des blocs verticalement, car c’est le comportement par défaut des « div » mises les unes à la suite des autres.
Alex: Si l’on n’applique aucune transformation aux éléments fils, l’utilisation de flexbox dans ce cas n’apporte rien…

 

Comment modifier l’ordre des éléments ?

La solution CSS classique

Les éléments mis les uns à la suite des autres sont dans cet ordre précis : de haut en bas. Cependant, pour les alignements horizontaux (via les « float »), l’ordre est de gauche à droite, si tous les blocs sont en « float : left » et de droite à gauche si les blocs sont en « float : right ».

La solution Flexbox

Vous pouvez modifier l’ordre des éléments en utilisant la propriété « order » :

Voir le code pen Cellenza – Flexbox – LEQBor par Alexandre DEMOULIN (@dmeul) sur CodePen.

On peut constater que les éléments ordonnés sont placés à la suite des éléments non ordonnés.

Bilan

Georges : J’avoue que là, pour le coup la propriété « order » est très intéressante et facilite l’implémentation pour ce besoin.

Alex : Effectivement, quand on commence à creuser les propriétés de flexbox, on se rend compte tout de suite de son intérêt et de sa simplicité. D’ailleurs, je suis certain que les amateurs de WPF/Silverlight s’y retrouveront 😉

 

Comment wrapper les éléments d’une ligne ?

La solution CSS classique

En partant du principe qu’on utilise la propriété « float » pour aligner horizontalement les blocs, la propriété « clear » avec pour valeur « both » permet de « wrapper » les blocs suivants. Cependant, si le conteneur est de taille fixe, et que les blocs contenus mis horizontalement dépassent la taille du conteneur, ils seront automatiquement « wrappés ».

Voir le code Pen Cellenza – Flexbox – PwQvVQ par Georges Damien (@Djdodjes) sur CodePen.

La solution Flexbox

Hyper fastoche ! Il suffit d’utiliser la propriété « flex-wrap » :

Voir le code pen Cellenza – Flexbox – azqjgq par Alexandre DEMOULIN (@dmeul) sur CodePen.

La propriété « flex-wrap » peut prendre les valeurs suivantes :

  • nowrap (valeur par défaut)
  • wrap (les éléments wrappés sont placés en dessous)
  • wrap-reverse (les éléments wrappés sont placés au dessus)

Bilan

Georges : le retour à la ligne des blocs contenus dans un conteneur n’est pas simple : selon les propriétés que l’on utilise (des float par exemple), on peut se retrouver à faire du « custom » selon le résultat voulu, SURTOUT lorsque l’on a pour objectif de faire du « Responsive ».
Alex : Flexbox est nativement conçu pour pouvoir supporter ce genre de comportement et il est responsive!

 

Comment répartir l’espace entre les éléments ?

La solution CSS classique

L’espacement peut être gérer avec les propriétés « margin » (pour l’espacement extérieur au bloc concerné) et « padding » (pour l’espacement du contenu du bloc sur lequel est appliqué le padding).

La solution Flexbox

Côté Flexbox, nous disposons de trois propriétés pour gérer la répartition de l’espace entre les éléments :

  • flex-grow
  • flex-shrink
  • flex-basis

Vous pouvez utilisez ces propriétés indépendamment mais il est fortement conseillé d’utiliser la propriété « flex » :
flex:none | auto | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] Si l’on souhaite répartir l’espace uniformément, il suffit d’appliquer la propriété « flex:auto » aux éléments :

Voir le code pen Cellenza – Flexbox – LEQBwB par Alexandre DEMOULIN (@dmeul) sur CodePen.

Vous pouvez définir le ratio d’un élément avec « flex:integer » :

Voir le code pen Cellenza – Flexbox – xbYaPQ par Alexandre DEMOULIN (@dmeul) sur CodePen.

Ici, on constate que « Body » qui a la valeur « flex:2 » est deux fois plus grand que « Menu » qui a la valeur « flex:1« . On pourrait très bien mettre « flex:4 » et « flex:2« , cela aurait eu le même effet.
Attention: si un seul ratio est affecté, l’élément en question occupera tout l’espace restant.
Pour plus de détails, je vous conseille de lire les spécifications : W3C Flexible Box

Bilan

Georges : Il est vrai que lorsqu’on se retrouve avec plusieurs blocs à « caler proprement », on se retrouve assez souvent à bidouiller les « margin » et « padding » des blocs de façon unitaire et cela peut être un réel calvaire à maintenir par la suite.

Alex : Encore une fois, flexbox a été conçu pour vous aider à répondre à ce genre de problématique, profitez-en!

 

Finalement ça donne quoi notre template ?

La solution CSS classique

Pour ce qui est du Header et du Footer, on ne change pas grand chose : il s’agit de deux blocs classiques. Par contre, pour l’affichage du menu de gauche et surtout du « content Responsive », ça devient un peu plus compliqué : il faut, par exemple, définir pour le bloc de gauche une taille horizontale en pourcentage et relative à celui de droite.

Une autre solution serait de jouer avec les « margin » des blocs mais, là encore, cela reste difficile à caler surtout si on travaille avec les propriétés « float ».
Il se pose également le problème des hauteurs relatives des deux blocs.

Ce cas peut-être géré de plusieurs façons que je qualifierais « d’adaptatives ».

Voir le code Pen Cellenza – Flexbox – template final par Georges Damien (@Djdodjes) sur CodePen.

La solution Flexbox

Si l’on reprend ce que l’on a vu précédemment, on va utiliser une flexbox en colonne avec trois éléments :

  • Header
  • Partie centrale (flexbody)
  • Footer

Le flexbody va recevoir la propriété « flex:1 » ce qui va lui permettre de prendre tout l’espace vertical disponible.
Ce flexbody va devenir lui-même un conteneur flexbox en ligne avec le Menu et le Body. On ajoute quelques propriétés pour définir la taille de chacun et le tour est joué :

Voir le code pen Cellenza – Flexbox – template final par Alexandre DEMOULIN (@dmeul) sur CodePen.

Conclusion

Georges : Flexbox semble répondre à bon nombre de problématiques récurrentes de « calage CSS » et peut s’avérer très utile notamment pour ce qui est de rendre « Responsive » un site. De plus, il semble assez intuitif et simple d’usage quand on raisonne en mode « conteneur et contenu ». J’ai cependant quelques réserves quant à son utilisation plus poussée notamment sur des maquettes avec des positionnement très spécifiques. Aussi, la problématique d’interprétation par toutes les versions de navigateur se pose, même si globalement les propriétés Flexbox sont reconnues par les dernières versions. Au final, Flexbox vaut le détour et nous promet probablement de belles surprises dans les années à venir.

Alex : Je vois l’arrivée de Flexbox comme une petite pépite dans le monde CSS. En effet, la disposition des éléments dans une page HTML est quelque chose de difficile à aborder surtout quand on vient du monde WinForm/WPF. Aujourd’hui, Flexbox n’est toujours pas dans sa version finale mais on peut compter sur des personnes venant de chez Google, Mozilla et Microsoft. A savoir qu’aujourd’hui Flexbox est supporté par tous les navigateurs récents (Flexbox browser support). Il reste évidemment de nombreuses propriétés de Flexbox que nous n’avons pas explorées ici.

Tags: center, css, Flexbox, html,

8 Commentaires Laisser un commentaire

Il est effectivement légitime de se poser la question du support de notre code via les vieilles version de navigateur.

Toutefois, de nos jours (janvier 2016), hormis les entreprises disposant d’un gros parc informatique (souvent vieillissant), tous le monde ou presque dispose d’un navigateur supportant parfaitement Flexbox.

Donc dans la mesure ou vous codez pour un usage web public et non destiné à un intranet d’entreprise, privilégiez sans aucune hésitation le module Flexbox.

De plus, si vous faites l’effort de coder en utilisant Flexbox dés aujourd’hui, vous misez sur un code qui sera optimisé pour plusieurs années.

Répondre

Curiosité récente, forcément je m’y intéresse 🙂
Malheureusement, peu de sites expliquent de façon simple l’usage du FlexBox vu qu’il est encore méconnu de tous…
Avec votre tutoriel, j’ai compris très simplement et de façon très clair.
Merci beaucoup et bonne continuation.

Répondre
Alain Ternaute
février 26, 2016 12:05

Excellent cas pratique.
Match suivant : CSS classique vs Flexbox sur… la mise en forme d’un formulaire ! ^^

Répondre
Alexandre Démoulin
Alexandre Démoulin
juin 9, 2016 10:22

Merci pour votre retour!
Je n’ai rien contre, c’est hyper simple avec Flexbox; mais je ne suis pas sûr que l’idée plaise à Georges 😉

Répondre

Bonjour, merci de votre cours sur flexbox,je suis un débutant dans la matière ,pouvez-vous me donner
plus de renseignements ou une page layout complète.

Merci
serge.

Répondre
Alexandre Démoulin
Alexandre Démoulin
juin 9, 2016 10:15

Bonjour Serge,
pour trouver toutes les informations nécessaires sur Flexbox je vous renvoie vers la spécification W3C: https://www.w3.org/TR/css-flexbox-1

Répondre

Hello à tous, merci pour l’article. Est-il possible d’utiliser les medias queries avec Flexbox ? Comment passer d’un alignement horizontal à un alignement vertical sous une certaine résolution ?

Répondre
Alexandre Démoulin
Alexandre Démoulin
juin 9, 2016 10:19

Bonjour Jonathan,
rien ne vous empêche de combiner les deux, j’ai trouvé cet exemple sur codepen: https://codepen.io/estelle/pen/brDpB

Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *