Flexbox Generator

Master Flexbox visually: tweak direction, alignment, wrapping and spacing, and watch the layout update live.

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.