CSS & Flexbox CSS & Flexbox

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

  
…
  
…
  
…

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.

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.

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

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.

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);