Gå til hovedindhold
LibraTool logoLibraTool

Gratis CSS Flexbox-generator

Eksperimentér med flex-retning, ombrydning, justering og justering på live-elementer — og kopier CSS.

Virker offline, når den er indlæst
Forudindstillinger

Tip: klik på et element i eksemplet for at skifte flex-grow: 1 på det.

Live-eksempel
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 kører i din browser — intet uploades.

Sådan fungerer det

En interaktiv flexbox-legeplads: skift flex-direction, wrap, justify-content og align-items, og se op til 10 live-elementer omarrangere sig med det samme. Klik på et element for at give det flex-grow: 1 og se, hvordan det tager plads. CSS'en opdateres live, klar til at kopiere ind i dit projekt.

  1. 1
    Indstil containeren
    Retning, wrap, justify-content, align-items, gap.
  2. 2
    Tilføj elementer
    Et til ti nummererede flex-elementer.
  3. 3
    Eksperimentér
    Klik på et element for at slå flex-grow til/fra og se effekten.
  4. 4
    Kopiér CSS'en
    Reglerne for containeren (og elementet), klar til indsættelse.

Alt kører i din browser — intet uploades.

Relaterede værktøjer

🟦

CSS Grid-generator

Design visuelt et CSS-grid — spor, enheder og mellemrum — og kopier det genererede CSS og HTML.

Prøv det
🌈

CSS-gradientgenerator

Opret lineære, radiale og koniske CSS-gradienter med liveforhåndsvisning. Kopiér CSS med ét klik.

Prøv det
🎨

CSS Box Shadow-generator

Visuel builder til CSS box-shadow med liveforhåndsvisning, flerlags-stabling, farvevælger, inset-skift og ét-klik-kopiering. Inkluderer Material-, neumorfisme- og glow-forudindstillinger.

Prøv det

Ofte stillede spørgsmål