Softonic

CSS Flexbox-generator

Steg 1 / 2 Generera CSS
Nästa

Flexbox är det självklara valet för endimensionell layout: rader med cards, nav-barer, centrerade hero-block, formulär. Container-och-item-modellen är kraftfull, men dess egenskaper samverkar på sätt som inte är uppenbara. Den här generatorn tar bort gissandet ur containern: välj flex-direction, justify-content, align-items, flex-wrap och gap och få en ren CSS-regel som du kan kopiera rakt in i din stylesheet.

Så genererar du CSS:en

  1. 1

    Välj en riktning

    Välj row, column eller de omvända varianterna. Detta ställer in flex-direction, axeln som items flyter längs.

  2. 2

    Ställ in justify-content

    Välj hur items fördelas längs huvudaxeln: start, center, space-between, space-around eller end.

  3. 3

    Ställ in align-items

    Välj hur items riktas in på tväraxeln: stretch, start, center eller end.

  4. 4

    Ställ in gap och wrap

    Lägg till mellanrum mellan items i pixlar och bestäm om items ska brytas till en ny rad.

  5. 5

    Kopiera CSS:en

    Generatorn skriver ut containerregeln med alla egenskaper, redo att klistras in i din stylesheet.

Container-egenskaper

Egenskap Värden Effekt
flex-direction row / column / row-reverse / column-reverse Huvudaxel
flex-wrap nowrap / wrap / wrap-reverse Om items wrappar
justify-content flex-start / center / flex-end / space-between / space-around / space-evenly Distribution längs huvudaxeln
align-items flex-start / center / flex-end / baseline / stretch Cross-axis-uppriktning av varje rad
align-content samma värden + space-between / space-around När wrappad, cross-axis-distribution av rader
gap (row-gap, column-gap) längd Spacing mellan items

Item-egenskaper

Egenskap Värden Effekt
flex-grow 0+ (enhetslös) Andel av överblivet utrymme att absorbera
flex-shrink 0+ (enhetslös) Andel av overflow att krympa
flex-basis längd eller auto Startstorlek innan grow/shrink
flex shorthand (1 1 auto, etc.) Alla tre på en gång
align-self auto / flex-start / center / flex-end / baseline / stretch Åsidosätter align-items för ett item
order heltal Visuell omordning utan att ändra DOM

flex: 1-tricket

flex: 1 är shorthand för flex: 1 1 0%. Det gör att ett item:

  • Växer för att fylla tillgängligt utrymme (grow: 1)
  • Krymper om nödvändigt (shrink: 1)
  • Startar från noll storlek (basis: 0%)

För lika breda kolumner ger flex: 1 på varje item perfekt uppdelning. För sidebars som inte ska krympa under innehållet, använd flex: 0 0 240px (ingen grow, ingen shrink, 240px basis).

Vanliga mönster

Centrerad hero

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navbar med logo vänster, länkar höger

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* tryck höger */
  display: flex;
  gap: 1rem;
}

Responsiv card-rad

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* grow/shrink, 260px minimum innan wrap */
}

Formulärfält med knapp (input flexibel, knapp fast)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox vs. Grid

  • Flexbox: en dimension (rad ELLER kolumn). Bäst när item-storlekar styrs av innehållet eller när du distribuerar utrymme längs en enskild linje.
  • Grid: två dimensioner (rader OCH kolumner med explicita spår). Bäst när layouten har rad- och kolumnstruktur samtidigt.

För en nav-bar eller en stack av cards: Flexbox. För ett produktkort-grid med flera rader av uppriktade cards: CSS Grid. Många riktiga sidor använder båda, en Grid-sidlayout med Flexbox inuti komponenter.

Vanliga fallgropar

  • Items fyller inte containern: standard align-items: stretch gäller bara om items inte har fast höjd. Med explicit höjd stannar de på den storleken.
  • gap fungerar inte: kolla webbläsarstöd. Flex gap landade sent; Safari <14.1 stödde det inte. Nu universellt i 2024+.
  • Barn till column flex kollapsar: en flex-kolumn har align-items: stretch som standard, vilket sträcker items till container-bredd. Om ett barn sätter en bredd bryter det ut.
  • order är bara visuell: skärmläsare och tangentbordsnavigation följer DOM-ordning. Använd inte order för att få innehållet att vara begripligt; använd det bara för visuell polering.

Vanliga frågor

Grid för tvådimensionella sidlayouter (rader och kolumner ihop). Flexbox för endimensionella distributioner (nav bar, knapprad, stack). Inuti en Grid-cell, Flexbox för dess interna layout. De flesta komplexa UI använder båda.

Eftersom flex-shrink har default 1 men min-width har default auto, vilket är lika med innehållsbredd. Sätt min-width: 0 (eller min-inline-size: 0) på itemet för att låta det krympa under sin intrinsiska storlek.

display: flex; justify-content: center; align-items: center; på containern. Täcker den stora majoriteten av “centrera den här grejen”-fall med två rader.

Ja, i alla moderna webbläsare. Safari var sen (lade till i 14.1, april 2021); idag stödjer alla större webbläsare det. Ersätt margin-baserad spacing med gap när du kan, mycket enklare.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

Slumpmässig färggenerator

Generera 1 till 50 slumpmässiga HEX-färger med färgrutor som du kan förhandsvisa, kopiera och använda i CSS, tester eller palettskissning.