Hoppa till huvudinnehåll
LibraTool logoLibraTool

Gratis CSS Flexbox-generator

Experimentera med flex-riktning, wrap, justify och align på live-objekt — och kopiera CSS.

Fungerar offline när den väl lästs in
Förinställningar

Tips: klicka på ett objekt i förhandsvisningen för att växla flex-grow: 1 på det.

Live-förhandsvisning
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>

🔒 Allt körs i din webbläsare — ingenting laddas upp.

Så här fungerar det

En interaktiv flexbox-lekplats: växla flex-direction, wrap, justify-content och align-items och se upp till 10 levande element omordnas direkt. Klicka på valfritt element för att ge det flex-grow: 1 och se hur det tar utrymme. CSS:en uppdateras live, redo att kopieras in i ditt projekt.

  1. 1
    Ställ in behållaren
    Riktning, radbrytning, justify-content, align-items, mellanrum.
  2. 2
    Lägg till element
    Ett till tio numrerade flex-element.
  3. 3
    Experimentera
    Klicka på ett element för att växla flex-grow och se effekten.
  4. 4
    Kopiera CSS:en
    Behållarens (och elementens) regler, redo att klistra in.

Allt körs i din webbläsare — inget laddas upp.

Relaterade verktyg

🟦

CSS Grid-generator

Designa visuellt ett CSS-rutnät — spår, enheter och gap — och kopiera den genererade CSS och HTML.

Prova det
🌈

CSS-gradientgenerator

Skapa linjära, radiala och koniska CSS-gradienter med liveförhandsvisning. Kopiera CSS med ett klick.

Prova det
🎨

CSS-boxskuggegenerator

Visuell byggare för CSS box-shadow med liveförhandsvisning, flerlagersstapling, färgväljare, inset-växling och kopiering med ett klick. Inkluderar Material-, neumorfism- och glödförinställningar.

Prova det

Vanliga frågor