Liigu põhisisu juurde
LibraTool logoLibraTool

CSS Flexboxi generaator tasuta

Eksperimendeerige painde suunda, mähkimist, õigustamist ja joondamist otseülekande üksustes — ja kopeerige CSS.

Töötab võrguühenduseta pärast laadimist
Eelseadistused

Nõuanne: klõpsake üksusele eelvaates, et sisse/välja lülitada flex-grow: 1 sellel.

Otseülekande eelvaade
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Kõik töötab teie brauseris — midagi ei laadita üles.

Kuidas see töötab

Interaktiivne flexbox mänguväljak: vaheta flex-direction, wrap, justify-content ja align-items ning vaata, kuidas kuni 10 reaalajas elementi korraldatakse koheselt ümber. Klõpsa mis tahes elemendil, et anda sellele flex-grow: 1 ja vaata, kuidas see ruumi nõuab. CSS uueneb reaalajas, valmis kopeerimiseks su projekti.

  1. 1
    Sea konteiner
    Suund, wrap, justify-content, align-items, gap.
  2. 2
    Lisa elemente
    Üks kuni kümme numereeritud flex-elementi.
  3. 3
    Eksperimenteeri
    Klõpsa elemendil, et lülitada flex-grow ja näha efekti.
  4. 4
    Kopeeri CSS
    Konteineri (ja elemendi) reeglid, valmis kleepimiseks.

Kõik toimib sinu brauseris — midagi ei laadita üles.

Seotud tööriistad

🟦

CSS Ruudustiku generaator

Kujundage visuaalselt CSS ruudustikku — rajad, ühikud ja vahed — ja kopeerige loodud CSS ja HTML.

Proovi järele
🌈

CSS-gradiendi generaator

Loo lineaarseid, radiaalseid ja koonilisi CSS-gradiendid reaalajas eelvaatega. Kopeeri CSS ühe klõpsuga.

Proovi järele
🎨

CSS-kastivarju generaator

Visuaalne CSS box-shadow ehitaja reaalajas eelvaatega, mitmekihilise virnastamise, värvivalija, sissesüvise lülitamise ja ühe klõpsuga kopeerimisega. Sisaldab Materiali, neumorfismi ja sädelevu eelseadistusi.

Proovi järele

Korduma kippuvad küsimused