Flexbox-editor
Gratis online Flexbox-layouteditor, visuel forhåndsvisning i realtid
Om Flexbox Editor
Komponér visuelt en flex-container og kopier den tilsvarende CSS-koden. Skifte retning (rad, kolonne, rad-omvendt, kolonne-omvendt), justify-content (sex valg inklusive space-evenly), align-items (inklusive stretch og baseline), flex-wrap, gap samt antallet visningsobjekter – den live visning og kodboksen opdateres omedelbart.
Hvordan bruge
1. Klik på knapperne på kortet Properties for at vælge flex-direction, justify-content, align-items og flex-wrap. 2. Træk slideren Gap (0–32px) for at stille til med mellemrummet mellem elementerne. 3. Træk slideren Items (1–12) for at tilføje eller fjerne forudsynningsboxer. 4. Se den live forudsynning øverst, og klik derefter på Copy for at kopiere hele flex-deklarationsblokken.
Egenskaber og valgmuligheder
retning: række | kolonne | række-omvendt | kolonne-omvendt. justeringsindhold: flex-start | flex-end | center | space-between | space-around | space-evenly. aligneringsobjekter: flex-start | flex-end | center | stretch | baseline. flex-wrap: nowrap | wrap | wrap-reverse. Afstanden er angivet i px. Udgeben giver altid display: flex sammen med alle fire egenskaber, uanset om værdierne er standardværdier.
▶Hvorfor inkluderer output alle egenskaber, selv når de er standard?
▶Kan jeg sætte flex-grow, flex-shrink eller flex-basis per element?
▶Påvirker align-items: baseline virkelig alignment med tekstbasen?
▶Er der en maksimal antal elementer?
Hvis dette værktøj har været nyttigt for dig, kan du overveje at købe en kaffe til mig.
Køb en kaffe til mig