⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

CSS Flexbox-generator

Bygg en CSS-flexbox-layout visuellt: flex-direction, justify-content, align-items, flex-wrap och gap för containern, samt per barn flex-grow, flex-shrink och flex-basis, allt med live-förhandsgranskning och kopieringsbar CSS.

🔒 Bearbetas helt i din webbläsare – ingenting du anger här laddas någonsin upp.

Bearbetar... 0%

Resultat

En flexbox-layout har två separata regelböcker – egenskaper på containern (flex-direction, justify-content, align-items, flex-wrap, gap) och egenskaper på varje barn (flex-grow, flex-shrink, flex-basis) – och att blanda ihop dem är den vanligaste orsaken till buggar av typen "varför centreras/växer/radbryts inte detta som jag förväntar mig". Generatorn visar båda regelböckerna på skärmen samtidigt: ändra valfri containerkontroll eller ett barns egna fält så uppdateras tre numrerade, färgkodade rutor omedelbart, så att orsak och verkan förblir synliga.

Containersidan täcker varje layoutaxel: välj en riktning, välj hur barn fördelas längs huvudaxeln med justify-content, justera dem på korsaxeln, bestäm om de ska radbrytas till nya rader och ange ett gap istället för marginalhack mellan dem. Barnsidan är precis lika på riktigt: lägg till upp till åtta rutor, ta bort ner till två, och ge vilken som helst av dem egna flex-grow, flex-shrink och flex-basis – generatorn skriver bara ut en CSS-regel per barn när minst ett av dessa skiljer sig från webbläsarens standardvärde, så den kopierade koden fylls aldrig ut med flex-grow: 0 på rutor som inte behöver det.

Förinställda sidor hoppar direkt till de layouter som folk faktiskt söker efter med namn: hur man centrerar en div (den mest ställda CSS-layoutfrågan, löst med justify-content och align-items båda inställda på center), ett navigationsfält med logotyp till vänster och länkar till höger, flexibla kolumner med lika bredd via flex-grow, och en sida-vid-sida-jämförelse av space-between mot dess nära släktingar space-around och space-evenly.

Precis som alla verktyg på den här webbplatsen är generatorn gratis och körs helt i din webbläsare: ingen uppladdning, inget konto, och den fortsätter fungera offline när sidan väl har laddats.

Gillar du det här verktyget? Tror du att den här produkten är användbar? Ser du potential i det och vill stödja det?

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Containerkontroller: flex-direction, justify-content, align-items, flex-wrap och en gap-inmatning i pixlar, applicerade live på förhandsgranskningen.
  • Tre färgkodade barnrutor som standard (lägg till upp till åtta, ta bort ner till två), var och en med sina egna fält för flex-grow, flex-shrink och flex-basis.
  • Kopieringsbart CSS-block med en .flex-container-regel plus en .flex-item-N-regel per barn som har icke-standardvärden för flex.

Viktiga fördelar

✓ Varje containerkontroll och varje barns flex-grow, flex-shrink och flex-basis uppdaterar tre numrerade förhandsgranskningsrutor i realtid, så att du ser exakt vad dina flexbox-regler gör innan du rör en stilmall.
✓ Generatorn skriver bara ut barnregler som faktiskt skiljer sig från CSS-standardvärdena, så den kopierade koden hålls kort och läsbar istället för att upprepa flex-grow: 0 på varje ruta.
✓ Förinställda sidor löser de layouter som folk söker efter med namn: centrera en div, ett navigationsfält med logotyp till vänster och länkar till höger, samt flexibla kolumner med lika bredd – öppna en och verktyget är redan konfigurerat.

Användningsfall

  • • Få den exakta CSS du behöver för att centrera en div både horisontellt och vertikalt genom att se hur justify-content och align-items fungerar i en live-förhandsvisning.
  • • Bygg en navbar med logga till vänster och länkar till höger genom att använda space-between och align-items: center, och kopiera sedan container-CSS rakt in i din header-komponent.
  • • Jämför space-between, space-around och space-evenly sida vid sida på samma tre boxar istället för att gissa vilken som ger det avstånd du vill ha.