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

Equal-Width Flexbox Columns — CSS 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

Den här sidan öppnar generatorn med flex-grow: 1 redan inställd på alla tre förhandsgranskningsrutorna. Titta på dem: istället för att krympa för att passa deras innehåll, gör varje ruta anspråk på en identisk andel av det överblivna utrymmet i raden, vilket är hela receptet för flexibla kolumner med lika bredd – inga procentuella bredder, ingen calc(), ingen fast pixelmatte för att hålla synkroniseringen.

flex-grow: 1 säger åt ett barn att växa, och om du ställer in det på varje barn i raden så växer de alla lika mycket, så de hamnar i samma bredd oavsett hur många det finns eller vilket innehåll som finns i dem. Lägg till eller ta bort en ruta med kontrollerna nedan och de återstående kolumnerna omfördelas omedelbart för att förbli lika – ändra storlek på ett webbläsarfönster över denna layout i produktionen och det beter sig på samma sätt.

Detta är mönstret bakom kortrutnät med lika höjd, kolumner för pristabeller och jämnt delade sidfotssektioner. Ge en kolumn mer utrymme genom att höja dess flex-grow över de andra, eller kopiera CSS-blocket nedan exakt som det genereras för en ren lika uppdelning.

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