Historique

Bien avant FlexBox, les premiers sites Web utilisaient un HTML lourd avec des tableaux et des images découpées. Puis le CSS arriva avec des résultats efficaces rapidement adoptés par les graphistes. Un site comme CSS Zen Garden était la vitrine du CSS.
À cette période, deux techniques sont fréquemment utilisées les float avec clearfix et les inline-block que l’on combine aux positionnements absolus. Si les possibilités sont infinies, cette pratique n’est plus adaptées aux besoins d’aujourd’hui.

FlexBox

Depuis 2016, le modèle de boîte et de positionnement Flexbox devient une évidence pour les nouveaux projets.
Pour l’utiliser, il faut appliquer celui-ci sur un conteneur.

Partons du HTML suivant

<div class="conteneur">
  <div class="enfant"></div>
  <div class="enfant"></div>
  <div class="enfant"></div>
</div>

Sur le conteneur on applique le display flex.

.conteneur{
  display:flex;
}

On peut ajouter une direction sur l’axe principal sachant que par défaut les enfants sont côte à côte sur une seule ligne.

.conteneur{
  display:flex;
  flex-direction:row; /* par défaut axe horizontal */
  /* ou */
  flex-direction: column; /* axe vertical  enfants seront l'un en dessous des autres */
  flex-direction: row-reverse; /* ordre inversé */
  flex-direction: column-reverse;
}

Puis si nécessaire, ajouter des propriétés aux enfants du conteneur ou définir des dimensions avec width/height.

.conteneur .enfant{
  flex:1 0 200px;   /* cette ligne est un raccourci de la suite */
  flex-grow:1; /* l'élément peut s'agrandir, s'étendre au reste de la page */
  flex-shrink:0; /* l'élément ne peut pas de réduire */
  flex-basis:200px; /* l'élément fait 200px sauf s’il reste de la place */
}

Sur ce codepen, j’applique display:flex sur le body, je fixe la taille du header à 360px de large et je choisis flex-grow:1 pour le .main.

See the Pen nav bar vertical flex + rich text file by Benoît Wimart (@benoitwimart) on CodePen.dark

Flexbox semble simple mais demande un peu de pratique. Dans son utilisation courante, celui-ci amène une écriture assez concise avec des solutions à de vieilles problématiques. Attention, avant d’utiliser flexbox partout, inline-block et block sont aussi des positionnements efficaces !

CSS-Tricks

Pour être plus complet, vous trouverez sur CSS-Tricks un mémo indispensable sur Flexbox.

Une grille, des colonnes, des tuiles…

De façon générale, la plupart des sites hors-mobile ont un contenu réparti sur plusieurs colonnes. Flexbox permet de mettre des blocs côte à côte et de les distribuer selon l’espace. Par conséquence, il s’impose comme une solution rapide pour régler une mise en page.

Exemple simplifié avec width

Attention avec flexbox, width n’est pas prioritaire, voici l’ordre des propriétés :

  1. min-width/min-height
  2. max-width/max-height
  3. flex-wrap
  4. flex-shrink/flex-grow
  5. flex-basis
  6. width/height

Démonstrations avec ou sans flex-wrap.

See the Pen flexbox, nowrap & width by Benoît Wimart (@benoitwimart) on CodePen.dark

See the Pen flexbox, wrap & width by Benoît Wimart (@benoitwimart) on CodePen.dark

Avec des marges

L’ajout de marges change la façon de calculer les largueurs, si vous êtes perdu avec le calc(% – px), tâtonnez avec l’inspecteur de Chrome ou Firefox !

See the Pen flexbox, wrap , width & margin by Benoît Wimart (@benoitwimart) on CodePen.dark

Technique du wrap

Depuis que flexbox est populaire et utilisable sur la plupart des navigateurs, une technique très rapide et efficace consiste à combiner 4 propriétés CSS display:flex; flex-wrap:wrap; justify-content:space-between; et width:calc(% - px);. Cette combinaison permet de créer des blocs fluides/élastiques (en pourcentage) et des gouttières fixes en pixel.

  • On applique le display:flex sur notre bloc parent;
  • On définit le retour à la ligne des blocs quand il n’y a plus de place avec flex-wrap:wrap (exemple : on empêche de mettre 3 blocs de 40% de largueur = 120% sur la même ligne);
  • On ajuste la largueur des blocs en pourcentage moins une portion de la gouttière finale avec width:calc(50% - 10px);
Attention calc() est fourbe, il est impératif de mettre des espaces autour des signes d’opération calc(50%-10px). Une fois de plus l’inspecteur de code vous affichera le problème si vous allez sur l’élément responsable.