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

CSS Flexbox 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

En flexbox-layout har to separate regelbøker – egenskaper på beholderen (flex-direction, justify-content, align-items, flex-wrap, gap) og egenskaper på hvert barn (flex-grow, flex-shrink, flex-basis) – og å blande dem er den vanligste kilden til "hvorfor er ikke dette sentrering/vekst/innpakning" feil på veien. Denne generatoren setter begge regelbøkene på skjermen samtidig: endre enhver beholderkontroll eller ethvert barns egne felt og tre nummererte, fargekodede bokser oppdateres umiddelbart, så årsak og virkning forblir synlige.

Beholdersiden dekker hver layoutakse: velg en retning, velg hvordan barna skal fordeles langs hovedaksen med rettferdig-innhold, juster dem på kryssaksen, avgjør om de vikler seg på nye linjer, og sett et gap i stedet for marginhakk mellom dem. Barnesiden er like ekte: legg til bokser opptil åtte, fjern ned til to, og gi noen av dem sin egen flex-grow, flex-shrink og flex-basis - generatoren skriver bare ut en CSS-regel per barn når minst én av disse er forskjellig fra nettleserens standard, så den kopierte koden fyller seg aldri med flex-grow: 0 på bokser som ikke trenger den.

Forhåndsinnstilte sider hopper rett til layoutene folk faktisk søker etter ved navn: hvordan sentrere en div (det mest stilte CSS-layoutspørsmålet, løst med justify-content og align-items som begge er satt til senter), en logo-venstre lenker-høyre navigasjonslinje, fleksible kolonner med lik bredde via flex-grow, og en side-ved-side-sammenligning av dens nære og relative mellomrom.

Som alle andre verktøy på dette nettstedet, er generatoren gratis og kjører i sin helhet i nettleseren din: ingen opplasting, ingen konto, og den fortsetter å fungere offline når siden er lastet inn.

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