Hopp til hovedinnhold
LibraTool logoLibraTool

Gratis CSS Flexbox-generator

Eksperimenter med flex-retning, ombrytning, justify og align på live-elementer — og kopier CSS.

Fungerer uten nett når den er lastet
Forhåndsinnstillinger

Tips: klikk på et element i forhåndsvisningen for å veksle flex-grow: 1 på det.

Live-forhåndsvisning
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>

🔒 Alt kjører i nettleseren din — ingenting lastes opp.

Hvordan det fungerer

En interaktiv flexbox-lekeplass: bytt flex-direction, wrap, justify-content og align-items og se opptil 10 live-elementer ordne seg umiddelbart. Klikk på et element for å gi det flex-grow: 1 og se hvordan det tar plass. CSS-en oppdateres live, klar til å kopieres inn i prosjektet ditt.

  1. 1
    Still inn beholderen
    Retning, bryting, justify-content, align-items, gap.
  2. 2
    Legg til elementer
    Ett til ti nummererte flex-elementer.
  3. 3
    Eksperimenter
    Klikk på et element for å slå flex-grow av/på og se effekten.
  4. 4
    Kopier CSS-en
    Reglene for beholderen (og elementene), klare til å limes inn.

Alt kjører i nettleseren — ingenting lastes opp.

Relaterte verktøy

🟦

CSS Grid-generator

Utform et CSS-rutenett visuelt — spor, enheter og mellomrom — og kopier den genererte CSS og HTML.

Prøv det
🌈

CSS-gradientgenerator

Lag lineære, radiale og koniske CSS-gradienter med direkte forhåndsvisning. Kopier CSS-en med ett klikk.

Prøv det
🎨

CSS box-shadow-generator

Visuelt verktøy for CSS box-shadow med forhåndsvisning i sanntid, stabling av flere lag, fargevelger, inset-bryter og kopiering med ett klikk. Inkluderer forhåndsinnstillinger for Material, neumorfisme og glød.

Prøv det

Ofte stilte spørsmål