Flexbox-generator
Indstil egenskaberne og læs på almindeligt dansk, hvad de egentlig gør.
- Kører i din browser — din tekst sendes aldrig nogen steder hen
- Ingen tilmelding, ingen kvoter, gratis at bruge så ofte, du vil
Sådan fungerer det
Flexbox er ikke kompliceret, men én ting ved det snubler næsten alle: justify-content og align-items betyder ikke vandret og lodret. De betyder langs retningen og på tværs af den, og retningen er noget, du selv angiver.
Fælden, sagt ligeud
Med flex-direction: row virker justify-content vandret og align-items lodret. Skift til column, og de bytter helt plads. Hver time, der går tabt på flexbox, handler i bund og grund om det her. Forklaringen nedenunder opdateres, når du ændrer retningen, så sammenhængen er synlig i stedet for udenadslært.
Hovedakse og krydsakse
Hovedaksen er den, elementerne flyder langs, angivet af flex-direction. Krydsaksen er vinkelret på den. justify-content fordeler plads langs hovedaksen; align-items placerer elementer på krydsaksen. Når de to navne sidder fast, følger resten af sig selv.
gap, og hvorfor det erstattede margener
gap lægger afstand mellem elementer uden at tilføje den uden for det første og det sidste, hvilket er præcis det, margener gør forkert, og det, folk plejede at rette med :last-child-hacks. Det understøttes i alle aktuelle browsere, og der er ikke længere nogen grund til at undgå det.
nowrap betyder krymp, ikke løb over
Standarden er nowrap, og elementer krymper til under deres naturlige størrelse for at passe i stedet for at flytte til en ny linje. Det er derfor, tekst nogle gange bliver uventet trykket sammen i en flex-række. Når du sætter wrap, kan elementer i stedet flytte nedad; min-width: 0 på et barn forhindrer det i at krympe forbi sit indhold.
Centrering i begge retninger
justify-content: center med align-items: center centrerer et element i begge retninger uanset flex-direction, hvilket er den ene kombination, der er værd at lære direkte udenad.
Flexbox-generator – spørgsmål
Hvorfor flytter align-items ting vandret?
Fordi flex-direction er column. De to egenskaber følger retningen, ikke skærmen.
Hvad er forskellen på hovedaksen og krydsaksen?
Hovedaksen er den retning, elementerne flyder i, angivet af flex-direction. Krydsaksen er vinkelret på den.
Hvordan centrerer jeg noget i begge retninger?
justify-content: center sammen med align-items: center.
Hvorfor er min tekst trykket sammen?
Standarden nowrap krymper elementer, så de passer. Sæt flex-wrap: wrap eller min-width: 0 på barnet.
Kan jeg bruge gap med flexbox?
Ja, i alle aktuelle browsere. Det er bedre end margener, fordi det ikke tilføjer afstand i enderne.