Flexbox-editori
Ilmainen online Flexbox-asettelueditori, visuaalinen reaaliaikainen esikatselu
Tietoja Flexbox Editor -työkalusta
Visuaalisesti koosta flex-kontti ja kopioi vastaava CSS. Vaihda suunta (row, column, row-reverse, column-reverse), justify-content (kuusi vaihtoehtoa mukaan lukien space-evenly), align-items (mukaan lukien stretch ja baseline), flex-wrap, gap ja esikatseluelementtien määrä — live-esikatselu ja koodipaneeli päivittyvät heti.
Käyttöohje
1. Napsauta painikkeita Ominaisuudet-kortissa valitaksesi flex-direction, justify-content, align-items ja flex-wrap. 2. Vedä Gap-liukusäätintä (0–32px) asettaaksesi välin elementtien välille. 3. Vedä Items-liukusäätintä (1–12) lisätäksesi tai poistaaksesi esikatselulaatikoita. 4. Katso live-esikatselua ylhäällä, sitten napsauta Kopioi kopioidaksesi koko flex-ilmoituslohkon.
Ominaisuudet ja valinnat
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 on px-yksikössä. Tuloste sisältää aina display: flex ja kaikki viisi ominaisuutta riippumatta siitä, ovatko arvot oletuksia.
▶Miksi tuloste sisältää jokaisen ominaisuuden vaikka oletusarvoinen?
▶Voinko asettaa elementtikohtaisen flex-grow, flex-shrink tai flex-basis?
▶Toimiiko align-items: baseline todella tekstin perustilaa?
▶Onko olemassa elementtien enimmäismäärää?
Jos tämä työkalu on ollut sinulle hyödyllinen, harkitse kahvin ostamista.
Osta minulle kahvi