Flexbox Generator

Maîtrisez Flexbox visuellement : ajustez la direction, l'alignement, le retour à la ligne et l'espacement, et observez la disposition se mettre à jour en direct.

Paramètres

Aperçu

Code


            
            
            

Guide d'utilisation

Flexbox aligne des éléments sur un axe. justify-content agit sur l'axe principal (défini par flex-direction) et align-items sur l'axe transversal.

  • space-between répartit l'espace entre les éléments.
  • gap remplace avantageusement les marges entre items.

FAQ

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

justify-content distribue l'espace le long de l'axe principal, align-items aligne les éléments sur l'axe perpendiculaire.

gap fonctionne-t-il avec Flexbox ?

Oui, la propriété gap est désormais supportée par tous les navigateurs modernes en Flexbox.