⭐ 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 på behållaren, plus per-child flex-grow, flex-shrink och flex-bas, allt med en liveförhandsvisning och kopierbar CSS.

Bearbetar... 0%

Resultat

En flexbox-layout har två separata regelböcker – egenskaper på behållaren (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 källan till "varför är inte detta centrering / växande / inpackning" fel på vägen. Den här generatorn sätter båda regelböckerna på skärmen samtidigt: ändra alla behållarkontroller eller alla barns egna fält och tre numrerade, färgkodade rutor uppdateras omedelbart, så att orsak och verkan förblir synliga.

Behållarsidan täcker varje layoutaxel: välj en riktning, välj hur barn ska fördelas längs huvudaxeln med justify-content, rikta in dem på tväraxeln, bestäm om de lindas in på nya linjer och ställ in ett mellanrum istället för marginal hack mellan dem. Den underordnade sidan är lika verklig: lägg till rutor upp till åtta, ta bort ner till två och ge någon av dem sin egen flex-grow, flex-shrink och flex-bas - generatorn skriver bara ut en CSS-regel per barn när minst en av dessa skiljer sig från webbläsarens standard, så den kopierade koden fyller aldrig sig själv med flex-grow: 0 på rutor som inte behöver den.

Förinställda sidor hoppar direkt till layouterna som folk faktiskt söker efter med namn: hur man centrerar en div (den enskilt mest ställda CSS-layoutfrågan, löst med justify-content och align-items som båda är inställda på centrerad), en logotyp-vänster länkar-höger navigeringsfält, flexibla kolumner med lika bredd via flex-grow och en sida vid sida jämförelse av dess nära släkting-mellan utrymme och mellanrum.

Liksom 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 att fungera offline när sidan har laddats.

🛡️
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

  • Behållarkontroller: flex-direction, justify-content, align-items, flex-wrap och en luckinmatning i pixlar, tillämpas live på förhandsgranskningen.
  • Tre färgkodade underordnade rutor som standard (lägg till upp till åtta, ta bort ner till två), var och en med sina egna flex-grow, flex-shrink och flex-bas.
  • Kopierbart CSS-block med en .flex-container-regel plus en .flex-item-N-regel per barn som har flexegenskaper som inte är standard.

Viktiga fördelar

✓ Varje containerkontroll och varje barns flex-grow, flex-shrink och flex-bas uppdaterar tre numrerade förhandsgranskningsrutor live, så att du ser exakt vad dina flexbox-regler gör innan du rör en stilmall.
✓ Generatorn skriver bara ut underordnade regler som faktiskt skiljer sig från CSS-standarderna, så den kopierade koden förblir kort och läsbar istället för att återställa flex-grow: 0 på varje ruta.
✓ Förinställda sidor löser layouterna som folk söker efter med namn: centrera en div, en logotyp-vänster länkar-höger navigeringsfält och lika breda flexibla kolumner – öppna en och verktyget är redan konfigurerat.

Användningsfall

  • • Skaffa exakt CSS för att centrera en div både horisontellt och vertikalt genom att se justify-content och align-items arbeta i liveförhandsgranskningsrutor.
  • • Bygg en logotyp-vänster, länk-höger navigeringsfältslayout med mellanslag-mellan och align-objekt: centrera, kopiera sedan behållarens CSS direkt in i din rubrikkomponent.
  • • Jämför mellanrum-mellan, mellanrum runt och mellanrum-jämnt sida vid sida på samma tre rutor istället för att gissa vilken som matchar avståndet du vill ha.