Générateur Flexbox CSS : créer des mises en page visuellement

Direction

Justify Content

Align Items

Flex Wrap

Align Content

Gap px

Items

Preview

Generated CSS

À propos de cet outil

Le générateur Flexbox CSS vous permet de définir flex-direction, justify-content, align-items, flex-wrap, align-content et gap sur un conteneur, de prévisualiser jusqu’à 20 éléments en direct et de copier le CSS généré.

Mode d’emploi

Choisissez la direction et le retour à la ligne.
Réglez justify-content et align-items (et align-content pour les lignes multiples).
Réglez le gap et le nombre d’éléments d’aperçu.
Cliquez sur Copier le CSS pour utiliser les règles du conteneur.

Bon à savoir

justify-content aligne les éléments sur l’axe principal ; align-items les aligne sur l’axe secondaire.
flex-direction: column inverse les axes : justify-content agit alors verticalement.
align-content n’a d’effet que lorsque les éléments passent sur plusieurs lignes.
La propriété gap fonctionne avec Flexbox dans tous les grands navigateurs actuels.
Flexbox est unidimensionnel ; utilisez CSS Grid pour gérer lignes et colonnes en même temps.

Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.

Questions fréquentes

Comment centrer une div avec Flexbox ?

Sur le parent, définissez display: flex; justify-content: center; align-items: center; et l’enfant est centré horizontalement et verticalement.

Quelle est la différence entre justify-content et align-items ?

justify-content répartit les éléments le long de l’axe principal (une ligne par défaut) ; align-items les positionne le long de l’axe secondaire.

Quand utiliser Flexbox plutôt que Grid ?

Utilisez Flexbox pour les mises en page unidimensionnelles comme les barres de navigation et les rangées de boutons, et Grid pour les mises en page bidimensionnelles.

Pourquoi align-content n’a-t-il aucun effet ?

align-content ne s’applique que lorsque flex-wrap permet aux éléments de passer sur plusieurs lignes.

Générateur CSS Flexbox