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

Note : Depuis que le module de positionnement Grid est mieux supporté, la mise en page principale passera plutôt par celui-ci. Les blocs de la page (et leur gouttières) via Grid, chaque bloc pouvant avoir un display flexbox ou grid.
Pour simplifier, Grid est en 2D (2 axes), Flex en 1D (1 seul axe horizontal ou vertical).
La suite de l’article n’est pas pour autant désuète, car dans certaines situations Flexbox est le meilleur choix.

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