Siirry pääsisältöön
LibraTool logoLibraTool

CSS Flexbox -generaattori ilmaiseksi

Kokeile flex-suuntaa, käärintää, tasaus ja linjaus reaaliaikaisilla kohteilla — ja kopioi CSS.

Toimii offline-tilassa kerran ladattuna
Valmiit asetukset

Vihje: klikkaa kohdetta esikatsannossa vaihtuaksesi flex-grow: 1 sille.

Reaaliaikainen esikatselu
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>

🔒 Kaikki toimii selaimessasi — mitään ei lähetetä.

Miten se toimii

Interaktiivinen flexbox-hiekkalaatikko: vaihda flex-direction, wrap, justify-content ja align-items ja katso jopa 10 suoran elementin järjestyvän uudelleen välittömästi. Napsauta mitä tahansa elementtiä antaaksesi sille flex-grow: 1 ja katso miten se vaatii tilaa. CSS päivittyy reaaliajassa, valmiina kopioitavaksi projektiisi.

  1. 1
    Aseta säiliö
    Suunta, wrap, justify-content, align-items, väli.
  2. 2
    Lisää elementtejä
    Yhdestä kymmeneen numeroitua flex-elementtiä.
  3. 3
    Kokeile
    Napsauta elementtiä kytkeäksesi flex-growin ja nähdäksesi vaikutuksen.
  4. 4
    Kopioi CSS
    Säiliön (ja elementin) säännöt, valmiina liitettäväksi.

Kaikki toimii selaimessasi — mitään ei ladata palvelimelle.

Liittyvät työkalut

🟦

CSS-verkon generaattori

Suunnittele CSS-verkkoa visuaalisesti — raidat, yksiköt ja aukot — ja kopioi luotu CSS ja HTML.

Kokeile sitä
🌈

CSS-gradienttgeneraattori

Luo lineaarisia, radiaalisia ja kartiomaisia CSS-gradientteja reaaliaikaisella esikatselulla. Kopioi CSS yhdellä napsautuksella.

Kokeile sitä
🎨

CSS-varjogeneraattori

Visuaalinen rakentaja CSS:n box-shadow-ominaisuudelle reaaliaikaisella esikatselulla, monikerrospinoamisella, värinvalitsimella, sisävarjovaihtoehdolla ja yhdellä napsautuksella kopioitavalla. Sisältää Material-, neumorfismi- ja hehkuesimääritetyt arvot.

Kokeile sitä

Usein kysytyt kysymykset