Slaan oor na hoofinhoud
LibraTool logoLibraTool

Gratis CSS Flexbox-kragopwekker

Eksperimenteer met flex-rigting, -verpakking, -regverdigheid en -afstemming op live-items — en kopieer die CSS.

Werk vanlyn sodra gelaai
Voorinstellings

Wenk: klik 'n item in die voorkoms om flex-grow: 1 daarop af te wikkel.

Live-voorkoms
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>

🔒 Alles loop in jou blaaier — niks word opgelaai nie.

Hoe dit werk

'n Interaktiewe flexbox-speelgrond: wissel flex-direction, wrap, justify-content en align-items en kyk hoe tot 10 lewendige items oombliklik herrangskik. Klik enige item om dit flex-grow: 1 te gee en sien hoe dit ruimte opeis. Die CSS werk lewendig by, gereed om in jou projek te plak.

  1. 1
    Stel die houer op
    Rigting, wrap, justify-content, align-items, gaping.
  2. 2
    Voeg items by
    Een tot tien genommerde flex-items.
  3. 3
    Eksperimenteer
    Klik 'n item om flex-grow te wissel en die effek te sien.
  4. 4
    Kopieer die CSS
    Die houer- (en item-) reëls, gereed om te plak.

Alles loop in jou blaaier — niks word opgelaai nie.

Verwante gereedskap

🟦

CSS Grid-kragopwekker

Ontwerp 'n CSS-rooster visueel — spore, eenhede en gate — en kopieer die gegenereerde CSS en HTML.

Probeer dit
🌈

CSS Gradiëntgenerator

Skep lineêre, radiale en koniese CSS-gradiënte met 'n lewendige voorskou. Kopieer die CSS met een klik.

Probeer dit
🎨

CSS-blokkieskadu-opwekker

Visuele bouer vir CSS boksskadu met lewendige voorskou, multi-laag stapeling, kleurkieser, insetwisseling en een-klik kopie. Sluit materiaal, neumorfisme en gloeivoorinstellings in.

Probeer dit

Gereelde vrae