Pourquoi utiliser Flexbox CSS ?

Flexbox est aujourd’hui un standard du développement CSS permettant de disposer des éléments sur une page et donc d’appréhender les feuilles de style (CSS) plus aisément. Fini la construction de tableau en HTML pour positionner les blocs (alignement vertical – horizontal – ordre – espacement – remplissage – etc) ! Flexbox a été créé pour faire gagner du temps au développeur.

Afin de mieux comprendre le fonctionnement de Flexbox, rien de plus simple que la pratique.

Tutoriel Flexbox : le développement d’une page web

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.

Notre maquette cible

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

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

Comment aligner les éléments sur ma page ?

La solution CSS classique

Pour faire les alignements horizontaux de ma page web, je vais utiliser la propriété CSS “float” avec pour valeur “left”. Je ne doic donc pas oublier de rajouter un “clear : both”, afin de recaler à la ligne les autres “div”.

Dans ce cas, 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 : la propriété “display”

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 constater sur le code pen, les éléments fils sont alignés automatiquement. D’ailleurs, il est possible de changer la direction dans laquelle les éléments sont alignés à l’aide de la propriété “flex-direction“.

Pour y arriver, voici les valeurs possibles qu’il faut ajouter :

• 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 (solution CSS) : 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 (solution Flexbox) : 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 de ma page web 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 : la valeur “flex-direction:column“

Si 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 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 : la propriété “order”

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 : la propriété “flex-wrap”

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 : la propriété “flex”

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 utiliser 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, à quoi ressemble le modèle final ?

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.

En revanche, 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.

Flexbox VS CSS classique

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.