Générateur de flexbox CSS

Générateur de flexbox CSS: à quoi ça sert

Flexbox est la façon la plus utilisée d’aligner des éléments sur une ligne ou une colonne en CSS, mais les noms des propriétés déroutent les débutants.

Ici, vous changez chaque option dans un sélecteur et voyez les éléments bouger aussitôt : direction, retour à la ligne, répartition sur l’axe principal, alignement sur l’axe transversal, align-content et espace entre les éléments. Le code n’affiche que ce qui a changé par rapport à la valeur par défaut et vous avertit lorsqu’une propriété n’a pas d’effet avec les autres choix.

Mode d’emploi

1. Choisissez les options de direction, d’alignement et de retour à la ligne.
2. Réglez le gap, le nombre d’éléments et l’élément qui s’étend.
3. Copiez le CSS du conteneur.

Quand l’utiliser

• Centrer un élément à l’écran.
• Composer un menu ou une ligne de boutons.
• Apprendre flexbox par la pratique.

Questions fréquentes

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

justify-content répartit les éléments sur l’axe principal (à l’horizontale si la direction est row) et align-items les aligne sur l’axe transversal (à la verticale dans ce cas). Si vous passez la direction à column, les deux changent d’axe.

Quand utiliser flexbox et quand utiliser grid ?

Flexbox sert pour une seule dimension : une ligne de boutons, un menu, des éléments qui s’arrangent selon l’espace. Grid sert pour deux dimensions à la fois, comme une galerie ou la mise en page de la page. Les deux peuvent être utilisés ensemble.

À quoi sert gap ?

Il place de l’espace entre les éléments sans marge sur les bords, ce qui exigeait auparavant des marges et des sélecteurs comme :last-child. Il fonctionne avec flexbox dans tous les navigateurs actuels.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires