⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

Equal-Width Flexbox Columns — CSS Generator

Byg et CSS flexbox-layout visuelt: flex-direction, justify-content, align-items, flex-wrap og gap på containeren, plus per-child flex-grow, flex-shrink og flex-basis, alt sammen med en live forhåndsvisning og kopierbar CSS.

Behandler... 0%

Resultat

Denne side åbner generatoren med flex-grow: 1 allerede indstillet på alle tre forhåndsvisningsbokse. Se dem: I stedet for at krympe, så de passer til deres indhold, kræver hver boks en identisk andel af den resterende plads i rækken, hvilket er hele opskriften på fleksible kolonner med samme bredde - ingen procentvise bredder, ingen calc(), ingen faste pixel-matematik for at holde synkroniseret.

flex-grow: 1 fortæller et barn, at det skal vokse, og at sætte det på hvert barn i rækken betyder, at de alle vokser lige meget, så de ender i samme bredde, uanset hvor mange der er, eller hvilket indhold der er inde i dem. Tilføj eller fjern en boks med kontrolelementerne nedenfor, og de resterende kolonner omfordeles øjeblikkeligt for at forblive lige – tilpas størrelsen på et browservindue over dette layout i produktionen, og det opfører sig på samme måde.

Dette er mønsteret bag lige høje kortgitter, pristabelkolonner og jævnt opdelte sidefodssektioner. Giv en kolonne mere plads ved at hæve dens flex-grow over de andre, eller kopier CSS-blokken nedenfor nøjagtigt som genereret for en ren lige opdeling.

🛡️
Udføres i browser

Dine filer og input forlader aldrig denne enhed. Behandlingen kører helt offline. 100 % sikker.

Accepterede formater og regler

  • Beholderkontroller: flex-direction, justify-content, align-items, flex-wrap og en gap-input i pixels, anvendt live på forhåndsvisningen.
  • Tre farvekodede underordnede bokse som standard (tilføj op til otte, fjern ned til to), hver med sine egne flex-grow, flex-shrink og flex-basis felter.
  • Kopierbar CSS-blok med en .flex-container-regel plus én .flex-item-N-regel pr. barn, der har ikke-standard flex-egenskaber.

Vigtige fordele

✓ Hver containerkontrol og ethvert barns flex-grow, flex-shrink og flex-basis opdaterer tre nummererede forhåndsvisningsbokse live, så du kan se præcis, hvad dine flexbox-regler gør, før du trykker på et stylesheet.
✓ Generatoren udskriver kun underordnede regler, der faktisk afviger fra CSS-standarderne, så den kopierede kode forbliver kort og læsbar i stedet for at gentage flex-grow: 0 på hver boks.
✓ Forudindstillede sider løser de layouts, folk søger efter ved navn: centrering af en div, en logo-venstre links-højre navigeringslinje og fleksible kolonner i samme bredde - åbn en, og værktøjet er allerede konfigureret.

Brug Cases

  • • Få den nøjagtige CSS til at centrere en div både vandret og lodret ved at se justify-content og align-items arbejde på live forhåndsvisningsbokse.
  • • Byg et logo-venstre, links-højre navbar-layout med mellemrum-mellem og align-elementer: centreret, og kopier derefter container-CSS direkte ind i din header-komponent.
  • • Sammenlign mellemrum-mellem, mellemrum-omkring og mellemrum-jævnt side om side på de samme tre kasser i stedet for at gætte, hvilken der matcher den mellemrum, du ønsker.