Introduktion till CSS Flexbox och verktyget
CSS Flexbox är en layoutmodell som används för att skapa flexibla och anpassningsbara layouter på webben. Modellen gör det enkelt att fördela utrymme och justera element i en behållare, oavsett deras ursprungliga storlek. Med detta verktyg, Flexbox-generator, kan du konfigurera en flex-container och dess objekt visuellt med hjälp av enkla kontroller. Du ser alla ändringar direkt i en levande förhandsvisning och kan sedan kopiera den genererade CSS-koden för din design.
Verktyget är särskilt användbart för dig som vill designa en layout visuellt, snabbt generera CSS-kod för en behållare och dess objekt, eller förstå hur olika flexbox-egenskaper påverkar layouten. Det hjälper dig också att skapa vanliga layouter som ett centrerat element, ett navigeringsfält, en stapel med element, kort eller ett sidofält.
Behållarens egenskaper och axlar
En flex-layout styrs i hög grad av de egenskaper som sätts på själva behållaren. Genom att manipulera dessa kontroller i verktyget kan du styra hur objekten flödar och fördelas:
- Riktning (direction): Bestämmer huvudaxelns riktning. Du kan välja mellan Rad (row), Omvänd rad (row-reverse), Kolumn (column) och Omvänd kolumn (column-reverse). Att byta riktning från rad till kolumn kastar om huvudaxeln och den tvärgående axeln, vilket direkt påverkar hur justeringsegenskaperna fungerar.
- Radbryt: Avgör om objekten måste ligga på en enda rad eller om de får flöda över till nästa. Alternativen är Ingen radbrytning, Radbrytning (wrap) och Omvänd radbrytning. Med radbrytning avstängd tvingas alla objekt att ligga på en enda rad. När radbrytning är aktiverad faller objekt som inte får plats ner på en ny rad.
- Justera vågrätt (justify-content): Bestämmer hur objekten fördelas längs huvudaxeln. Alternativen är Start, Slut, Centrera, Mellanrum mellan, Mellanrum runt och Jämnt mellanrum.
- Justera objekt (align-items): Bestämmer hur objekten justeras längs den tvärgående axeln. Alternativen är Start, Slut, Centrera, Sträck ut och Baslinje.
- Justera innehåll (align-content): Denna egenskap fördelar utrymmet mellan raderna i en behållare med flera rader. Den fungerar när radbrytning är aktiverad och objekten har brutits till flera rader. Alternativen är Start, Slut, Centrera, Sträck ut, Mellanrum mellan, Mellanrum runt och Jämnt mellanrum.
- Mellanrum (gap): Tar ett numeriskt värde och bestämmer avståndet mellan objekten samt mellan raderna i behållaren.
Inställningar för enskilda objekt
Utöver behållarens övergripande regler kan du finjustera egenskaper för enskilda objekt i layouten. När du klickar på knappen Lägg till objekt skapas ett nytt objekt i förhandsvisningen (till exempel "Item 5").
För varje enskilt objekt kan du styra följande parametrar:
- Ordning (order): Ett numeriskt värde som ändrar i vilken ordning objektet visas i förhållande till de andra.
- Väx (flex-grow): Ett numeriskt värde som anger hur mycket objektet ska växa för att fylla ut tillgängligt utrymme.
- Krymp (flex-shrink): Ett numeriskt värde som anger hur mycket objektet tillåts krympa när utrymmet är begränsat.
- Bas (flex-basis): Anger objektets startstorlek innan utrymmet fördelas. Kan sättas till ett numeriskt värde eller Automatisk bas.
- Justera själv (align-self): Gör det möjligt för ett enskilt objekt att frångå behållarens övergripande justering längs den tvärgående axeln. Alternativen är Auto, Start, Slut, Centrera, Sträck ut och Baslinje.
För att hålla din CSS-kod ren genereras endast CSS-regler för de objekt där du faktiskt har ändrat någon egenskap från standardvärdet.
Generering av CSS och integritet
När du har byggt din layout och anpassat dina objekt kan du enkelt hämta koden under rubriken CSS. Genom att klicka på knappen Kopiera CSS kopieras koden till ditt urklipp, och knappens text ändras till "Copied" för att bekräfta åtgärden.
När du använder verktyget kan du vara trygg med att din layout byggs direkt i din webbläsare. Inget av det du ställer in i verktyget laddas upp till externa servrar.
Vanliga frågor (FAQ)
Vad är skillnaden mellan justify-content och align-items?
Justera vågrätt (justify-content) fördelar objekten längs huvudaxeln – den riktning som raden eller kolumnen flödar i – medan Justera objekt (align-items) placerar dem längs den tvärgående axeln. Ändrar du riktningen från rad till kolumn byter de två axlarna plats. Det gör att Justera vågrätt (justify-content) börjar fungera uppifrån och ner, medan Justera objekt (align-items) fungerar från vänster till höger.
Hur fungerar inställningarna för enskilda objekt?
Du kan välja ett specifikt objekt och ställa in hur mycket det ska växa (Väx) för att fylla ut ledigt utrymme, hur mycket det ska krympa (Krymp) vid platsbrist, samt dess startstorlek (Bas). Med Ordning (order) kan du flytta ett objekt så att det visas tidigare eller senare på skärmen utan att ändra i HTML-koden. Du kan också använda Justera själv (align-self) för att ge ett enskilt objekt en annan justering än de övriga. Endast de objekt du faktiskt ändrar får en egen regel i den genererade CSS-koden.
När spelar wrap och align-content roll?
Med radbrytning avstängd tvingas alla objekt in på en enda rad, vilket kan göra att de pressas ihop. Om du slår på radbrytning faller de objekt som inte får plats ner på nästa rad. Det är först när du har flera rader som Justera innehåll (align-content) har en effekt, då den fördelar utrymmet mellan dessa rader som en grupp. Egenskapen Mellanrum (gap) sätter det exakta avståndet mellan objekten och mellan raderna.