Flexbox-redigerare
Gratis onlineverktyg för Flexbox-layoutredigering, visuell realtidsförhandsgranskning
Om Flexbox Editor
Visuellt skapa en flex-container och kopiera matchande CSS. Växla riktning (row, column, row-reverse, column-reverse), justify-content (sex alternativ inklusive space-evenly), align-items (inklusive stretch och baseline), flex-wrap, gap och antalet förhandsgranskningsobjekt — den live förhandsgranskningen och kodpanelen uppdateras direkt.
Användning
1. Klicka på knappar i Egenskapskortet för att välja flex-direction, justify-content, align-items och flex-wrap. 2. Dra Gap-reglaget (0–32px) för att ställa in avstånd mellan objekt. 3. Dra Items-reglaget (1–12) för att lägga till eller ta bort förhandsgranskningsrutor. 4. Titta på den live förhandsgranskningen högst upp, klicka sedan på Copy för att kopiera hela flex-deklarationsblocket.
Egenskaper & Alternativ
direction: row | column | row-reverse | column-reverse. justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly. align-items: flex-start | flex-end | center | stretch | baseline. flex-wrap: nowrap | wrap | wrap-reverse. gap är i px. Utdata skriver alltid display: flex plus alla fem egenskaper oavsett om värden är standardvärden.
▶Varför inkluderar utdata varje egenskap även när den är standard?
▶Kan jag ställa in per-objekt flex-grow, flex-shrink eller flex-basis?
▶Styr align-items: baseline verkligen efter textbaslinjen?
▶Finns det ett maximalt antal objekt?
Om detta verktyg har varit till hjälp för dig, överväg att bjuda mig på en kaffe.
Bjud mig på en kaffe