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

CSS Flexbox-generator

Bygg et CSS flexbox-oppsett visuelt: flex-direction, justify-content, align-items, flex-wrap og gap på beholderen, pluss per-barn flex-grow, flex-shrink og flex-basis, alt med en live forhåndsvisning og CSS du kan kopiere.

🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.

Behandler … 0%

Resultat

Et flexbox-oppsett 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 sentreres/utvides/brytes ikke dette slik jeg forventer»-feil. Denne generatoren legger begge regelbøkene på skjermen samtidig: endre en beholderkontroll eller et barns egne felt, og tre nummererte, fargekodede bokser oppdateres umiddelbart, slik at årsak og virkning forblir synlig.

Beholdersiden dekker hver layout-akse: velg en retning, velg hvordan barn fordeles langs hovedaksen med justify-content, juster dem på kryssaksen, bestem om de skal brytes til nye linjer, og sett et gap i stedet for margin-snarveier mellom dem. Barnesiden er like ekte: legg til bokser opptil åtte, fjern ned til to, og gi hvilken som helst av dem sin egen flex-grow, flex-shrink og flex-basis – generatoren skriver bare ut en per-barn CSS-regel når minst én av disse avviker fra nettleserens standard, slik at den kopierte koden aldri fylles ut med flex-grow: 0 på bokser som ikke trenger det.

Forhåndsinnstilte sider hopper rett til oppsettene folk faktisk søker etter ved navn: hvordan sentrere en div (det mest stilte CSS-layout-spørsmålet, løst med justify-content og align-items begge satt til center), en navigasjonslinje med logo til venstre og lenker til høyre, like brede fleksible kolonner via flex-grow, og en side-ved-side-sammenligning av space-between med sine nære slektninger space-around og space-evenly.

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

Liker du dette verktøyet? Synes du produktet er nyttig? Ser du potensial og ønsker å støtte det?

🛡️
Behandlet i nettleseren

Dine filer og inndata forlater aldri denne enheten. Behandlingen skjer fullstendig frakoblet. 100 % sikkert.

Godkjente formater og regler

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

Viktigste fordeler

✓ Hver beholderkontroll og hvert barns flex-grow, flex-shrink og flex-basis oppdaterer tre nummererte forhåndsvisningsbokser i sanntid, slik at du ser nøyaktig hva flexbox-reglene dine gjør før du rører et stilark.
✓ Generatoren skriver bare ut barneregler som faktisk avviker fra CSS-standardene, slik at 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 navigasjonslinje med logo til venstre og lenker til høyre, og like brede fleksible kolonner – åpne én, og verktøyet er allerede konfigurert.

Bruksområder

  • • Få nøyaktig CSS for å sentrere en div både horisontalt og vertikalt ved å se hvordan justify-content og align-items fungerer i en live forhåndsvisning.
  • • Bygg en navbar med logo til venstre og lenker til høyre ved hjelp av space-between og align-items: center, og kopier deretter container-CSS-en rett inn i header-komponenten din.
  • • Sammenlign space-between, space-around og space-evenly direkte på de samme tre boksene i stedet for å gjette hvilken som gir akkurat den avstanden du ønsker.