Flexbox Sandbox

Container à gauche et item sélectionné à gauche, rendus visuels, axes et CSS généré à droite.

Container

display: flex
flex-direction default: row
justify-content default: flex-start
align-items default: stretch
flex-wrap default: nowrap
align-content default: stretch

Agit surtout quand wrap crée plusieurs lignes.

gap: 12px 0
Nb items: 5
largeur: 100%
hauteur: 360px

Item sélectionné

propriétés d’un enfant

Sélection

Item à modifier

Positionnement

order: 0 0
align-self auto

Propriétés Flex

grow: 0 0
shrink: 1 1
basis auto

Dimensions & Démo

min-width: 70px
font-size: 16px

Résultat

Clique un item pour le sélectionner
Axe principal start end
Axe secondaire start end

CSS généré