Flexboks-redigerer
Gratis verktøy for Flexboks-oppsett-redigering på nettet, visuell sanntidsforhåndsvisning
Om Flexbox Editor
Komponer visuelt en flex-beholder og kopier den tilsvarende CSS. Veksle retning (row, column, row-reverse, column-reverse), justify-content (seks alternativer inkludert space-evenly), align-items (inkludert stretch og baseline), flex-wrap, gap, og antall forhåndsvisningselementer — live-forhåndsvisningen og kodepanelet oppdateres umiddelbart.
Hvordan bruke
1. Klikk knapper i Egenskaper-kortet for å velge flex-direction, justify-content, align-items og flex-wrap. 2. Dra Gap-skyderen (0–32px) for å sette avstand mellom elementer. 3. Dra Element-skyderen (1–12) for å legge til eller fjerne forhåndsvisningsbokser. 4. Se på live-forhåndsvisningen øverst, klikk deretter Kopier for å kopiere hele flex-deklarasjonsblokken.
Egenskaper og alternativer
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 er i px. Utdataen sender alltid display: flex pluss alle fem egenskaper uavhengig av om verdier er standardverdier.
▶Hvorfor inkluderer utdataen hver egenskap selv når den er standard?
▶Kan jeg sette flex-grow, flex-shrink eller flex-basis per element?
▶Fungerer align-items: baseline virkelig etter tekst-basislinje?
▶Er det et maksimalt antall elementer?
Hvis dette verktøyet har vært nyttig for deg, vurder å kjøpe meg en kaffe.
Kjøp meg en kaffe