⭐ 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-child flex-grow, flex-shrink og flex-basis, alt sammen med en live forhåndsvisning og kopierbar CSS.

Behandler... 0%

Resultat

Et flexbox-layout har to separate regelbøger – egenskaber på beholderen (flex-retning, juster-indhold, align-items, flex-wrap, mellemrum) og egenskaber på hvert barn (flex-grow, flex-shrink, flex-basis) – og at blande dem er den mest almindelige kilde til "hvorfor er denne centrering/voksning/indpakning ikke af vejen. Denne generator sætter begge regelbøger på skærmen på én gang: skift enhver containerkontrol eller ethvert barns egne felter, og tre nummererede, farvekodede felter opdateres med det samme, så årsag og virkning forbliver synlige.

Beholdersiden dækker hver layoutakse: vælg en retning, vælg, hvordan børn fordeles langs hovedaksen med justify-content, juster dem på tværs af aksen, afgør, om de ombrydes på nye linjer, og indstil et mellemrum i stedet for marginhak mellem dem. Den underordnede side er lige så reel: tilføj kasser 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 CSS-regel pr. barn, når mindst én af disse adskiller sig fra browserens standard, så den kopierede kode udfylder aldrig sig selv med flex-grow: 0 på kasser, der ikke behøver det.

Forudindstillede sider springer direkte til de layouts, folk rent faktisk søger efter ved navn: hvordan man centrerer en div (det mest stillede CSS-layoutspørgsmål, løst med justify-content og align-items, begge sat til center), en logo-venstre links-højre navigeringslinje, fleksible kolonner i lige bredde via flex-grow og en side-by-side-sammenligning af dens tætte mellemrum og mellemrum.

Som ethvert værktøj på dette websted er generatoren gratis og kører udelukkende i din browser: ingen upload, ingen konto, og den fortsætter med at arbejde offline, når siden er indlæst.

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