Flexbox-generator

Slik fungerer det

Flexbox er ikke komplisert, men én ting ved det tar nesten alle: justify-content og align-items betyr ikke horisontalt og vertikalt. De betyr langs retningen og på tvers av den, og retningen er noe du selv setter.

Fellen, sagt rett ut

Med flex-direction: row virker justify-content horisontalt og align-items vertikalt. Bytt til column, så bytter de plass helt. Hver time som går tapt på flexbox, handler i bunn og grunn om dette. Forklaringen under oppdateres når du endrer retningen, slik at sammenhengen er synlig i stedet for pugget.

Hovedakse og tverrakse

Hovedaksen er den elementene flyter langs, satt av flex-direction. Tverraksen står vinkelrett på den. justify-content fordeler plass langs hovedaksen; align-items plasserer elementer på tverraksen. Når de to navnene har festet seg, følger resten.

gap, og hvorfor det erstattet marger

gap legger rom mellom elementer uten å legge det utenfor det første og siste, som er akkurat det marger gjør feil og det folk pleide å rette opp med :last-child-hacks. Det støttes i alle gjeldende nettlesere, og det er ikke lenger noen grunn til å unngå det.

nowrap betyr krymp, ikke flyt over

Standarden er nowrap, og elementene krymper under sin naturlige størrelse for å passe i stedet for å flytte til en ny linje. Derfor blir tekst noen ganger uventet presset sammen i en flex-rad. Setter du wrap, kan elementene flytte nedover i stedet; min-width: 0 på et barn hindrer det i å krympe forbi innholdet.

Sentrere begge veier

justify-content: center sammen med align-items: center sentrerer et element i begge retninger uansett flex-direction, og det er den ene kombinasjonen som er verdt å pugge helt.