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

CSS Flexbox Generator

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

🔒 Behandles helt i din browser - intet, du indtaster her, bliver nogensinde uploadet.

Behandler... 0%

Resultat

Et flexbox-layout har to separate regelsæt — egenskaber på containeren (flex-direction, justify-content, align-items, flex-wrap, gap) og egenskaber på hvert barn (flex-grow, flex-shrink, flex-basis) — og at blande dem sammen er den mest almindelige kilde til "hvorfor centrerer / vokser / ombrydes dette ikke, som jeg forventer"-fejl. Denne generator viser begge regelsæt på skærmen samtidig: ændr en vilkårlig containerkontrol eller et barns egne felter, og tre nummererede, farvekodede bokse opdateres øjeblikkeligt, så årsag og virkning forbliver synlige.

Containersiden dækker alle layout-akser: vælg en retning, vælg hvordan børn fordeles langs hovedaksen med justify-content, juster dem på tværaksen, beslut om de skal ombrydes til nye linjer, og indstil en afstand i stedet for margin-hacks mellem dem. Barnesiden er lige så reel: tilføj bokse op til otte, fjern ned til to, og giv enhver af dem deres egen flex-grow, flex-shrink og flex-basis — generatoren udskriver kun en per-barn CSS-regel, når mindst én af disse afviger fra browserens standard, så den kopierede kode aldrig fyldes ud med flex-grow: 0 på bokse, der ikke har brug for det.

Forudindstillede sider springer direkte til de layouts, folk faktisk søger efter ved navn: hvordan man centrerer en div (det absolut mest stillede CSS-layoutspørgsmål, løst med justify-content og align-items begge sat til center), en navbar med logo til venstre og links til højre, fleksible kolonner med lige bredde via flex-grow og en side-om-side sammenligning af space-between med dets nære slægtninge space-around og space-evenly.

Som alle værktøjer på dette site er generatoren gratis og kører udelukkende i din browser: ingen upload, ingen konto, og den fortsætter med at fungere offline, når først siden er indlæst.

Kan du lide dette værktøj? Synes du, produktet er nyttigt? Ser du potentiale i det og vil støtte det?

🛡️
Køres i browseren

Dine filer og input forlader aldrig denne enhed. Al behandling foregår offline. 100 % sikkert.

Accepterede formater og regler

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

Vigtigste fordele

✓ Hver container-indstilling og hvert barns flex-grow, flex-shrink og flex-basis opdaterer tre nummererede forhåndsvisningsbokse live, så du ser præcis, hvad dine flexbox-regler gør, før du rører ved et stylesheet.
✓ Generatoren udskriver kun barn-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 navbar med logo til venstre og links til højre og fleksible kolonner med lige bredde — åbn én, og værktøjet er allerede konfigureret.

Anvendelsestilfælde

  • • Få præcis den CSS, der centrerer en div både vandret og lodret, ved at se justify-content og align-items i aktion på live forhåndsvisningsbokse.
  • • Byg en navbar med logo til venstre og links til højre ved hjælp af space-between og align-items: center, og kopiér derefter containerens CSS direkte ind i din header-komponent.
  • • Sammenlign space-between, space-around og space-evenly side om side på de samme tre bokse i stedet for at gætte, hvilken der giver den ønskede afstand.