Aqbeż għall-kontenut ewlieni
LibraTool logoLibraTool

Ġeneratur tas-CSS Flexbox b'xejn

Sperimenta b'flex direction, wrap, justify u align fuq items live — u kopja l-CSS.

Jaħdem offline ladarba mgħobbi
Presets

Tip: ikklikkja item fil-preview biex tidawwal flex-grow: 1 fuqu.

Preview live
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>

🔒 Kollox jaħdem fil-browser tiegħek — xejn ma jitgħabba.

Kif Taħdem

Playground interattiv ta' flexbox: aqleb flex-direction, wrap, justify-content u align-items u ara sa 10 elementi ħajjin jerġgħu jitqiegħdu minnufih. Ikklikkja kwalunkwe element biex tagħtih flex-grow: 1 u ara kif jitlob spazju. Is-CSS jiġi aġġornat ħaj, lest biex jitwaħħal fil-proġett tiegħek.

  1. 1
    Issettja l-kontenitur
    Direzzjoni, wrap, justify-content, align-items, vojt.
  2. 2
    Żid elementi
    Minn wieħed sa għaxar elementi flex innumerati.
  3. 3
    Esperimenta
    Ikklikkja element biex taqleb flex-grow u ara l-effett.
  4. 4
    Ikkopja s-CSS
    Ir-regoli tal-kontenitur (u tal-elementi), lesti biex jitwaħħlu.

Kollox jaħdem fil-browser tiegħek — xejn ma jitgħabba.

Għodod Relatati

🟦

Ġeneratur tas-CSS Grid

Iddisinja CSS grid viżwalment — tracks, units u gaps — u kopja l-CSS u HTML ġenerati.

Ipprova
🌈

Ġeneratur ta' Gradients CSS

Oħloq gradients CSS lineari, radjali, u koniċi b'preview ħaj. Ikkopja l-CSS b'klikk wieħed.

Ipprova
🎨

Ġeneratur ta' Box Shadow CSS

Builder viżwali għal box-shadow CSS b'preview ħaj, stacking multi-layer, colour picker, toggle inset, u kopja b'klikk wieħed. Jinkludi presets Material, neumorphism, u glow.

Ipprova

Mistoqsijiet Frekwenti