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
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 :
- min-width/min-height
- max-width/max-height
- flex-wrap
- flex-shrink/flex-grow
- flex-basis
- 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);
calc()
est fourbe, il est impératif de mettre des espaces autour des signes d’opération