Flexbox-generator
Ställ in egenskaperna och läs, på vanlig svenska, vad de faktiskt gör.
- Körs i din webbläsare — din text skickas aldrig någonstans
- Ingen registrering, inga kvoter, gratis att använda så ofta du vill
Så fungerar det
Flexbox är inte komplicerat, men en sak med det överraskar nästan alla: justify-content och align-items betyder inte horisontellt och vertikalt. De betyder längs riktningen och tvärs över den, och riktningen är något du ställer in.
Fällan, uttryckt rakt ut
Med flex-direction: row fungerar justify-content horisontellt och align-items vertikalt. Byt till column och de byter plats helt. Varje timme som förlorats på flexbox är i grunden detta. Förklaringen nedanför uppdateras när du ändrar riktningen så att sambandet syns i stället för att läras in utantill.
Huvudaxel och korsaxel
Huvudaxeln är den som elementen flödar längs, inställd av flex-direction. Korsaxeln är vinkelrät mot den. justify-content fördelar utrymme längs huvudaxeln; align-items placerar element på korsaxeln. När de två namnen har fastnat följer resten.
gap, och varför det ersatte marginaler
gap lägger utrymme mellan element utan att lägga till det utanför det första och sista, vilket är exakt vad marginaler gör fel och vad folk förr rättade med :last-child-hack. Det stöds i alla aktuella webbläsare och det finns inte längre något skäl att undvika det.
nowrap betyder krymp, inte svämma över
Standardvärdet är nowrap, och element krymper under sin naturliga storlek för att rymmas i stället för att flytta till en ny rad. Det är därför text ibland trycks ihop oväntat i en flex-rad. Att ställa in wrap låter element flytta ned i stället; min-width: 0 på ett barnelement hindrar det från att krympa förbi sitt innehåll.
Centrering åt båda hållen
justify-content: center med align-items: center centrerar ett element i båda riktningarna oavsett flex-direction, vilket är den enda kombination som är värd att lära sig utantill rakt av.
Flexbox-generator — frågor
Varför flyttar align-items saker horisontellt?
Eftersom flex-direction är column. De två egenskaperna följer riktningen, inte skärmen.
Vad är skillnaden mellan huvudaxeln och korsaxeln?
Huvudaxeln är den riktning som elementen flödar i, inställd av flex-direction. Korsaxeln är vinkelrät mot den.
Hur centrerar jag något åt båda hållen?
justify-content: center tillsammans med align-items: center.
Varför är min text hoptryckt?
Standardvärdet nowrap krymper element så att de ryms. Ställ in flex-wrap: wrap, eller min-width: 0 på barnelementet.
Kan jag använda gap med flexbox?
Ja, i alla aktuella webbläsare. Det är bättre än marginaler eftersom det inte lägger till utrymme i ändarna.