Générateur CSS Flexbox

Expérimentez visuellement avec CSS flexbox — ajustez chaque propriété de conteneur et copiez le CSS généré.

How to use Flexbox Generator

1. Choisissez une direction flexible et un pli flexible pour le contenant.
2. Ajuster le contenu de justification, les éléments d'alignement, le contenu d'alignement et l'écart.
3. Utilisez Ajouter un élément et supprimer l'élément pour définir le nombre de cases qui apparaissent dans l'aperçu.
4. Copiez le conteneur CSS généré et collez-le dans votre projet.

Quel est {nom} ?

FAQ

Quelle est la différence entre le contenu justifié et les éléments alignés?

justifier-contenu distribue les éléments le long de l'axe principal (la direction définie par la direction de flex), tout en alignant-items les positionne sur l'axe transversal perpendiculaire. La commutation de la direction flex entre la ligne et la colonne échange efficacement les axes que chacun commande.

Pourquoi l'alignement-contenu n'a-t-il parfois aucun effet visible?

aligne-contenu ne s'applique que lorsque les éléments s'enveloppent sur plusieurs lignes. Définissez flex-wrap pour envelopper et ajouter suffisamment d'éléments qu'ils cassent sur une deuxième ligne avant de changer l'alignement-contenu pour voir qu'il fonctionne.

Related tools

• CSS Grid Generator
• CSS Gradient Generator
• Border Radius Generator
• Box Shadow Generator