Flexbox-generator

Opsæt en flex-container og dens elementer med visuelle kontroller, se layoutet reagere live, og kopier CSS-koden med ét klik.

Forudindstillinger
Container
Retning (flex-direction)
Linjeskift (Wrap)
Fordel indhold
Juster elementer
Elementer
Element 1
Juster element
CSS
Juster containeren og elementerne for at forme dit layout.

Dit layout opbygges direkte i din browser. Intet af det, du indstiller her, uploades til BroBroGo.

FAQ

Hvad er forskellen på justify-content og align-items?

Justify-content fordeler elementerne langs hovedaksen (main axis) — den retning rækken eller søjlen flyder — mens align-items placerer dem på tværs af den anden akse (cross axis). Skifter du retningen fra række til søjle, bytter de to akser plads, så justify-content begynder at virke oppefra og ned, og align-items fra venstre mod højre.

Hvordan fungerer indstillingerne for de enkelte elementer?

Vælg et element ud fra dets nummer, og indstil derefter, hvor meget det må vokse (grow) for at fylde overskydende plads ud, hvor meget det må krympe (shrink), når pladsen er trang, dets startstørrelse (basis) og dets egen justering på tværs af aksen (align-self). Order flytter et element frem eller tilbage på skærmen uden at ændre i HTML-koden. Det er kun de elementer, du rent faktisk ændrer, der får deres egen regel i CSS-koden.

Hvornår har wrap og align-content betydning?

Når linjeskift (wrap) er slået fra, tvinges alle elementer ind på én linje og kan blive klemt sammen. Slår du det til, vil elementer, der ikke længere kan være der, rykke ned på næste linje — og det er her, align-content tager over og styrer afstanden mellem linjerne som en samlet gruppe. Gap angiver afstanden mellem elementerne og mellem linjerne uden brug af marginer.

Skrevet og gennemgået af BroBroGo-redaktionen.Sidst opdateret:

Introduktion til CSS Flexbox

CSS Flexbox er et layout-system, der bruges til at designe fleksible og responsive layouts. Med denne Flexbox-generator kan du visuelt opsætte en flex-container og dens elementer. Du manipulerer de forskellige kontroller for at definere dit layout, observerer ændringerne i en live visuel forhåndsvisning og kopierer derefter den genererede CSS-kode til dit eget design.

Værktøjet er ideelt til dig, der ønsker at designe et CSS flexbox-layout visuelt, hurtigt generere CSS til en flex-container og dens elementer, eller ønsker at forstå effekten af de forskellige flexbox-egenskaber på et layout. Det hjælper dig også med at skabe almindelige layouts som et centreret element, en navigationsbar, en stabel af elementer, kort eller en sidebjælke.

Forståelse af containerens egenskaber

Når du konfigurerer din flex-container, styrer du, hvordan elementerne overordnet skal opføre sig og fordele sig. Værktøjet giver dig adgang til følgende indstillinger for containeren:

  • Retning (flex-direction): Du kan vælge mellem Række (Row), Række omvendt, Søjle (Column) og Søjle omvendt. Når du skifter retningen fra række til søjle, bytter hovedaksen og den tværgående akse plads, hvilket har direkte indflydelse på, hvordan justeringen fungerer.
  • Linjeskift (Wrap): Her kan du vælge Intet linjeskift (No wrap), Linjeskift (Wrap) eller Omvendt linjeskift. Med linjeskift slået fra tvinges alle elementer til at ligge på en enkelt linje. Når linjeskift er slået til, vil elementer, der ikke kan være på linjen, rykke ned på næste linje.
  • Fordel indhold: Definerer fordelingen langs hovedaksen med indstillingerne Start, Slut, Centrer, Plads imellem, Plads rundt om eller Lige stor plads.
  • Juster elementer: Bestemmer, hvordan elementerne placeres på den tværgående akse. Mulighederne er Start, Slut, Centrer, Stræk eller Baseline.
  • Juster indhold: Når linjeskift er aktiveret, styrer denne egenskab afstanden mellem linjerne som en samlet gruppe. Du kan vælge Start, Slut, Centrer, Stræk, Plads imellem, Plads rundt om eller Lige stor plads.
  • Mellemrum (Gap): En numerisk værdi, der angiver den præcise afstand mellem elementerne og mellem linjerne.

Tilpasning af de enkelte elementer

Udover containeren kan du styre egenskaberne for de enkelte elementer i layoutet. Når du klikker på "Tilføj element", dukker der et nyt element op i din visuelle forhåndsvisning (for eksempel "Element 5").

For hvert enkelt element kan du justere følgende værdier:

  • Rækkefølge (Order): En numerisk værdi, der bestemmer elementets rækkefølge i forhold til de andre.
  • Vokse (flex-grow): En numerisk værdi, der angiver, hvor meget elementet må vokse for at fylde overskydende plads ud.
  • Krympe (flex-shrink): En numerisk værdi, der bestemmer, hvor meget elementet må krympe, hvis pladsen bliver for trang.
  • Basis (flex-basis): En numerisk værdi eller "Auto" (Automatisk basis), som definerer elementets startstørrelse.
  • Juster element: Giver dig mulighed for at overskrive containerens overordnede justering for det specifikke element. Du kan vælge Auto, Start, Slut, Centrer, Stræk eller Baseline.

Generering og eksport af CSS-kode

Mens du justerer på knapperne og værdierne, opdateres den visuelle forhåndsvisning af dit flexbox-layout med det samme. Samtidig genererer værktøjet den korrekte CSS-kode for både din flex-container og de tilhørende elementer.

For at holde koden ren og overskuelig, er det kun de elementer, som har fået ændret deres specifikke egenskaber, der vil få genereret deres egne CSS-regler. Når du er tilfreds med dit layout, klikker du på "Kopier CSS", hvorefter knappen skifter tilstand til "Kopieret", og koden er klar til at blive sat direkte ind i dit eget projekt.

Behandling af data og privatliv

Når du bruger denne Flexbox-generator, foregår alt arbejde lokalt på din egen enhed. Layoutet opbygges direkte i din browser, og intet af det, du indstiller eller foretager dig i værktøjet, uploades.

Ofte stillede spørgsmål (FAQ)

Hvad er forskellen på justify-content og align-items?

Justify-content fordeler elementerne langs hovedaksen (main axis) — den retning rækken eller søjlen flyder — mens align-items placerer dem på tværs af den anden akse (cross axis). Skifter du retningen fra række til søjle, bytter de to akser plads, så justify-content begynder at virke oppefra og ned, og align-items fra venstre mod højre.

Hvordan fungerer indstillingerne for de enkelte elementer?

Vælg et element ud fra dets nummer, og indstil derefter, hvor meget det må vokse (grow) for at fylde overskydende plads ud, hvor meget det må krympe (shrink), når pladsen er trang, dets startstørrelse (basis) og dets egen justering på tværs af aksen (align-self). Order flytter et element frem eller tilbage på skærmen uden at ændre i HTML-koden. Det er kun de elementer, du rent faktisk ændrer, der får deres egen regel i CSS-koden.

Hvornår har wrap og align-content betydning?

Når linjeskift (wrap) er slået fra, tvinges alle elementer ind på én linje og kan blive klemt sammen. Slår du det til, vil elementer, der ikke længere kan være der, rykke ned på næste linje — og det er her, align-content tager over og styrer afstanden mellem linjerne som en samlet gruppe. Gap angiver afstanden mellem elementerne og mellem linjerne uden brug af marginer.

CSS Cubic Bezier-generatorTræk i de to håndtag for at forme en easing-kurve, se en prik bevæge sig langs den i forhold til en jævn bevægelse, og kopier cubic-bezier()-værdien.Border radius-generatorAfrund hvert hjørne med skydere, form organiske klatter med elliptisk tilstand, og kopier din CSS med det samme.Box shadow-generatorTræk i skyderne for at forme en box-shadow, stabel lag for at skabe dybde, og kopier den færdige CSS med det samme.Gradient-generatorByg en lineær, radial eller konisk gradient, tilføj farvestop og indstil retningen, og kopier derefter CSS-koden med ét klik.CSS Grid-generatorIndstil dine søjler og rækker, træk hen over cellerne for at placere elementer, og kopier grid-CSS med tilhørende HTML med ét klik.CSS clamp() BeregnerIndtast en størrelse til små og store skærme, og få en flydende clamp()-værdi, der skalerer jævnt derimellem — til skriftstørrelser, padding, marginer eller gaps.FarvekonverterKonverter farver mellem HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt, og resten opdateres løbende.