Générateur de Flexbox CSS
Configurez un conteneur flex et ses éléments avec des contrôles visuels, voyez la mise en page réagir en direct, puis copiez le CSS en un clic.
Votre mise en page est construite dans votre navigateur. Rien de ce que vous réglez ici n’est envoyé à BroBroGo.
FAQ
Quelle est la différence entre justify-content et align-items ?
justify-content répartit les éléments le long de l’axe principal — la direction dans laquelle la ligne ou la colonne s’écoule —, tandis qu’align-items les place sur l’autre axe. Passez la direction de ligne à colonne et les deux axes s’inversent : justify-content agit alors de haut en bas et align-items de gauche à droite.
Comment fonctionnent les contrôles de chaque élément ?
Choisissez un élément par son numéro, puis réglez combien il grandit pour occuper l’espace libre, combien il rétrécit quand la place manque, sa taille de départ (basis) et son propre alignement sur l’axe transversal. L’ordre avance ou recule un élément à l’écran sans toucher au HTML. Seuls les éléments que vous modifiez reçoivent leur propre règle dans le CSS.
Quand le retour à la ligne et align-content comptent-ils ?
Sans retour à la ligne, tous les éléments tiennent sur une seule ligne et peuvent être comprimés. Activez-le et ceux qui ne rentrent plus passent à la ligne suivante : c’est là qu’align-content entre en jeu et répartit l’espace entre les lignes comme un ensemble. Le gap fixe l’écart entre les éléments, et entre les lignes, sans marges.