6XC

Bac à sable Flexbox CSS

Ajustez flex-direction, justify-content, align-items, wrap et gap sur des boîtes en direct, puis copiez le CSS du conteneur.

855 vues

1
2
3
4
5

Flexbox en bref

Définir display: flex transforme un conteneur en moteur de mise en page unidimensionnel. justify-content répartit les éléments le long de l'axe principal, align-items les aligne sur l'axe transversal, flex-direction choisit l'axe, et gap espace les éléments sans marges. Jouez avec les contrôles et regardez les boîtes numérotées se réorganiser en direct.

Questions fréquentes

Comment centrer parfaitement un élément ?

Les trois lignes célèbres : display: flex; justify-content: center; align-items: center; — centrage horizontal et vertical en une seule fois.

Flexbox ou Grid ?

Flexbox excelle pour les lignes ou colonnes unidimensionnelles qui s'adaptent au contenu (barres d'outils, navigation, rangées de cartes). Grid est conçu pour les mises en page bidimensionnelles avec des pistes explicites. Ils se combinent bien.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer