Voici une collection d’exemples populaires, choix inspirés de webflow.

Tuiles, grille modulaire

Dans ce premier exemple, flex-wrap:wrap; autorise un retour à la ligne et box-sizing:border-box; permet de jouer avec les pourcentages du bloc en incluant son padding.

See the Pen flex wrap by Benoît Wimart (@benoitwimart) on CodePen.0

Tuiles & couleurs

Cette variante ajoute des marges entre les blocs et exige un calcul supplémentaire width:calc(33.33% - 10px);.

See the Pen flex wrap + color by Benoît Wimart (@benoitwimart) on CodePen.0

Avec des images

See the Pen flex wrap + color + img by Benoît Wimart (@benoitwimart) on CodePen.0

Navigations en entête et en pied

Pour « coller » le footer, le bloc principal à un flex:1; pour s’étirer si la fenêtre est assez grande.

See the Pen nav bar horizontal footer by Benoît Wimart (@benoitwimart) on CodePen.0

Navigation latérale

See the Pen nav bar vertical + rtf by Benoît Wimart (@benoitwimart) on CodePen.0

Variation

Centrage pleine page

See the Pen Center Block Flexbox by Benoît Wimart (@benoitwimart) on CodePen.0

Centrage

See the Pen flex wrap fixed by Benoît Wimart (@benoitwimart) on CodePen.0