HervéRenault.fr

Logo de CSS3

justify, align (quelques exemples)

Flexbox avec flex-direction: row (par défaut) Grid avec grid-auto-flow: row (par défaut)
justify-content: center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Ça semble décentré mais en affichant la grille on comprend pourquoi
justify-items: center

Sans effet, cf. MDN

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

J'ai mis aussi justify-content: center sinon on ne voit rien
align-content: center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Sans effet si une seule ligne

J'ai mis flex-wrap: wrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

align-items: center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.