Générateur de Flexbox
Configurez un conteneur flex et ses éléments à l'aide de contrôles visuels, observez le comportement de la mise en page en direct et copiez le code CSS en un clic.
Votre mise en page est générée directement dans votre navigateur. Rien de ce que vous configurez ici n'est téléversé vers BroBroGo.
FAQ
Quelle est la différence entre justify-content et align-items?
La propriété justify-content répartit les éléments le long de l'axe principal — c'est-à-dire le sens d'écoulement de la ligne ou de la colonne —, tandis qu'align-items gère leur positionnement sur l'axe transversal. Si vous changez la direction de ligne (row) à colonne (column), les deux axes s'inversent : justify-content agira alors de haut en bas et align-items de gauche à droite.
Comment fonctionnent les contrôles individuels par élément?
Sélectionnez un élément par son numéro, puis déterminez sa capacité à grandir (grow) pour occuper l'espace libre, à rétrécir (shrink) lorsque l'espace est restreint, définissez sa taille initiale (basis) et son alignement propre sur l'axe transversal. La propriété order vous permet de modifier l'ordre d'affichage à l'écran sans toucher au code HTML. Seuls les éléments que vous modifiez généreront une règle spécifique dans le code CSS.
Quand le retour à la ligne (wrap) et la propriété align-content sont-ils importants?
Lorsque le retour à la ligne est désactivé, tous les éléments sont forcés de tenir sur une seule ligne et peuvent être compressés. En l'activant, les éléments qui manquent d'espace passent à la ligne suivante — c'est alors que la propriété align-content prend le relais pour répartir l'espace entre les différentes lignes. La propriété gap définit l'espacement entre les éléments et entre les lignes, sans avoir à manipuler les marges.