CSS Flexbox-testmiljö
Interaktiv testmiljö för att lära dig och generera Flexbox-layouter
Layoutinställningar
Färdiga layouter
Åsidosättningar per objekt
Välj ett objekt i förhandsvisningen eller listan för att redigera dess egenskaper.
Snabbreferens för Flexbox
Huvudaxel
justify-content styr justeringen längs huvudaxeln (som bestäms av flex-direction).
Tväraxel
align-items styr justeringen längs tväraxeln (vinkelrätt mot flex-direction).
Flera rader
align-content gäller bara när flex-wrap är satt till wrap eller wrap-reverse med flera rader.
Liveförhandsvisning
Genererad CSS
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}Ändra inställningarna eller välj ett objekt. Förhandsvisningen och CSS-koden uppdateras tillsammans.
Om CSS Flexbox-testmiljö
CSS Flexbox-testmiljö är ett visuellt, interaktivt verktyg för att lära sig och experimentera med CSS Flexbox-layouter. Flexbox (Flexible Box Layout) är en av de mest kraftfulla och mest använda CSS-layoutmodulerna och är utformad för att ordna objekt i en behållare med flexibelt, responsivt beteende. Med verktyget kan du ändra varje egenskap hos flexbehållaren och flexobjekten i realtid och se exakt hur layouten förändras.
Viktiga funktioner
- Full kontroll över alla egenskaper hos flexbehållaren: flex-direction, flex-wrap, justify-content, align-items, align-content och gap
- Åsidosättningar per objekt: order, flex-grow, flex-shrink, flex-basis och align-self
- Förhandsvisning i realtid med färgade, numrerade objekt och en streckad behållargräns
- Färdiga layouter, bland annat Navigeringsfält, Kortrutnät, Holy Grail, Centrerat innehåll och Layout med sidofält
- Automatiskt genererad CSS-kod med kopiering med ett klick
- Dynamiskt antal objekt, från 1 till 12
- Klicka för att markera objekt och redigera deras egenskaper var för sig
- Stöd för mörkt läge för bekväm användning i alla ljusförhållanden
Så fungerar Flexbox-egenskaperna
Flexbox arbetar längs två axlar: huvudaxeln (som bestäms av flex-direction) och tväraxeln (vinkelrät mot huvudaxeln). Egenskapen justify-content fördelar utrymmet längs huvudaxeln, medan align-items hanterar justeringen på tväraxeln. När flex-wrap tillåter radbrytning till flera rader styr align-content avståndet mellan raderna. Varje flexobjekt kan åsidosätta sin justering med align-self, styra sina tillväxt- och krympningsförhållanden och ange en basstorlek med flex-basis.
Vanliga layoutmönster med Flexbox
Flexbox är särskilt bra för att bygga navigeringsfält, centrera innehåll både horisontellt och vertikalt, skapa kortrutnät som bryts om responsivt, bygga layouter med ett fast sidofält och flytande huvudinnehåll samt implementera den klassiska Holy Grail-layouten med sidhuvud, sidfot, sidofält och huvudinnehåll. Använd mallknapparna för att direkt se mönstren i praktiken.
Vem är verktyget till för?
- Webbutvecklare som lär sig CSS Flexbox för första gången
- Frontend-utvecklare som snabbt prototypar responsiva layouter
- UI/UX-designers som vill visualisera flexlayouter innan de skriver kod
- Studenter som läser in sig på CSS-layouttekniker inför kurser eller intervjuer
- Lärare som demonstrerar Flexbox-begrepp på workshoppar eller i klassrum
- Alla som snabbt behöver generera Flexbox-CSS till sina projekt