⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

Equal-Width Flexbox Columns — CSS Generator

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

Behandler... 0%

Resultat

Denne siden åpner generatoren med flex-grow: 1 allerede satt på alle tre forhåndsvisningsboksene. Se dem: i stedet for å krympe for å passe til innholdet deres, krever hver boks en identisk andel av restplassen i raden, som er hele oppskriften på fleksible kolonner med lik bredde – ingen prosentvise bredder, ingen calc(), ingen fast pikselmatematikk for å holde synkronisert.

flex-grow: 1 forteller et barn å vokse, og å sette det på hvert barn i raden betyr at de alle vokser like mye, så de ender opp i samme bredde uavhengig av hvor mange det er eller hvilket innhold som sitter inni dem. Legg til eller fjern en boks med kontrollene nedenfor, og de resterende kolonnene omfordeles umiddelbart for å forbli like – endre størrelsen på et nettleservindu over dette oppsettet i produksjonen, og det oppfører seg på samme måte.

Dette er mønsteret bak kortrutenett med like høye høyder, kolonner med pristabeller og jevnt delte bunntekstseksjoner. Gi en kolonne mer plass ved å heve dens flex-grow over de andre, eller kopier CSS-blokken nedenfor nøyaktig slik den er generert for en ren lik fordeling.

🛡️
Utført i nettleser

Filene og inngangene dine forlater aldri denne enheten. Behandlingen kjører helt offline. 100 % sikker.

Godkjente formater og regler

  • Beholderkontroller: flex-direction, justify-content, align-items, flex-wrap og en gap-inngang i piksler, brukt live på forhåndsvisningen.
  • Tre fargekodede barnebokser som standard (legg til opptil åtte, fjern ned til to), hver med sine egne felt for flex-grow, flex-shrink og flex-basis.
  • Kopierbar CSS-blokk med en .flex-container-regel pluss én .flex-item-N-regel per barn som har ikke-standard flex-egenskaper.

Viktige fordeler

✓ Hver beholderkontroll og hvert barns flex-grow, flex-shrink og flex-basis oppdaterer tre nummererte forhåndsvisningsbokser live, slik at du ser nøyaktig hva flexbox-reglene dine gjør før du berører et stilark.
✓ Generatoren skriver bare ut underordnede regler som faktisk avviker fra CSS-standardene, så den kopierte koden forblir kort og lesbar i stedet for å gjenta flex-grow: 0 på hver boks.
✓ Forhåndsinnstilte sider løser oppsettene folk søker etter ved navn: sentrering av en div, en logo-venstre lenker-høyre navigasjonslinje og fleksible kolonner med lik bredde – åpne en og verktøyet er allerede konfigurert.

Brukssaker

  • • Få den nøyaktige CSS-en for å sentrere en div både horisontalt og vertikalt ved å se justify-content og align-elementer arbeide på live forhåndsvisningsbokser.
  • • Bygg en logo-venstre, lenker-høyre navigasjonslinje-layout med mellomrom-mellom og juster-elementer: senter, og kopier deretter beholderens CSS rett inn i overskriftskomponenten.
  • • Sammenlign mellomrom, mellomrom rundt og jevnt mellomrom side om side på de samme tre boksene i stedet for å gjette hvilken som samsvarer med avstanden du ønsker.