Lag perfekte Flexbox-oppsett

Visualiser, tilpass og generer CSS flexbox-kode med vårt intuitive dra-og-slipp-grensesnitt.

Egenskaper for beholder

Egenskaper for element

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Generert CSS-kode

Populære Flexbox-forhåndsinnstillinger

Sentrer horisontalt og vertikalt

Content

Perfekt for å sentrere en logo, knapp eller et hvilket som helst element både horisontalt og vertikalt.

Lik avstand

Item 1
Item 2
Item 3

Lag lik avstand mellom elementer med mellomrom mellom eller mellomrom rundt.

Vertikal meny

Home
About
Contact

Bygg en vertikal navigasjonsmeny med konsekvent avstand og justering.

Responsivt rutenett

Box 1
Box 2
Box 3
Box 4
Box 5

Opprett et responsivt rutenettoppsett som bryter elementer basert på tilgjengelig plass.

Heltebanner

Hovedtittel

Helteseksjon med oppfordring til handling

Design et heltebanner med tittel, undertekst og en handlingsfremmende knapp.

Bunntekst oppsett

Company

About Us

Careers

Support

Brukerstøtte

Kontakt oss

© 2023 Flexbox-generator

Bygg en responsiv bunntekst med kolonner som stables på mindre skjermer.

Eksempler fra den virkelige verden

Navigasjonsfelt

Logo
Home
Products
About
Contact

Et vanlig navigasjonslinjeoppsett med logo til venstre, menyelementer i midten og et handlekurvikon til høyre.

Card Grid

Kortets tittel

Kortbeskrivelsestekst her

Kortets tittel

Kortbeskrivelsestekst her

Kortets tittel

Kortbeskrivelsestekst her

Et responsivt kortrutenett som tilpasser seg ulike skjermstørrelser ved hjelp av flexbox-egenskaper.

Artikkel oppsett

Artikkel tittel

postet på januar 1, 2023 · 5 minutters lesing

Artikkelens innhold her. Dette kan være et kort sammendrag eller hele artikkelteksten. Flexbox hjelper til med å justere bildet og teksten på en visuelt tiltalende måte.

Et vanlig artikkeloppsett med et bilde til venstre og tekstinnhold til høyre, stablet på mobile enheter.

Dashbord-oppsett

Header
Sidebar
Hovedinnhold
Footer

Et dashbordoppsett med topptekst, sidefelt, hovedinnholdsområde og bunntekst ved hjelp av flexbox for både horisontal og vertikal justering.

Grunnleggende om Flexbox

Hva er Flexbox?

Flexible Box Layout, ofte kjent som Flexbox, er en CSS3-layoutmodell som gir en effektiv måte å distribuere og justere plass mellom elementer i en beholder, selv når størrelsen er ukjent eller dynamisk.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Hovedbegreper:Flexbox introduserer to hovedkonsepter:fleksibel beholder and the fleksible gjenstander. Beholderen er det overordnede elementet, og elementene er direkte underordnede.

Hovedakse vs tverrakse

Flexbox-oppsett er basert på to akser:main axis and the tverrakse.

  • Hovedakse:Primæraksen som fleksible elementer er lagt ut langs. Definert avflex-direction.
  • Tverrakse:Aksen vinkelrett på hovedaksen. Retningen avhenger av hovedaksens retning.
Hovedakse →
← tverrakse
Start
Main
End

Egenskaper for beholder

Property Description
display Definerer en fleksibel beholder; innebygd eller blokk avhengig av den gitte verdien.
flex-direction Etablerer hovedaksen, og definerer dermed retningen fleksivarene plasseres i fleksbeholderen.
flex-wrap Som standard vil alle fleksible elementer prøve å passe inn på én linje. Du kan endre dette og la elementene brytes etter behov med denne egenskapen.
justify-content Justerer fleksivarer langs hovedaksen til gjeldende linje i fleksibeholderen.
align-items Justerer fleksivarer langs tverraksen til gjeldende linje i fleksibeholderen.
align-content Justerer linjene til en fleksibel beholder når det er ekstra plass i tverraksen.

Egenskaper for element

Property Description
order Som standard legges fleksivarer ut i kilderekkefølgen. Imidlertid erorderEgenskapen styrer rekkefølgen de vises i i Flex-beholderen.
flex-grow Definerer muligheten for en fleksibel vare til å vokse om nødvendig. Den aksepterer en enhetsløs verdi som fungerer som en proporsjon.
flex-shrink Definerer muligheten for en fleksibel vare til å krympe om nødvendig.
flex-basis Definerer den opprinnelige størrelsen på en fleksibel vare før tilgjengelig plass fordeles i henhold til fleksifaktorene.
align-self Tillater standardjusteringen (eller den som er angitt avalign-items) som skal overstyres for individuelle flex-elementer.

Related Tools

SCSS til CSS-konvertering

Forvandle SCSS-koden din til CSS. Raskt, enkelt og sikkert.

CSS-minifier

Komprimer og optimaliser CSS-koden din med profesjonell presisjon

Pekepenn til CSS-konvertering

Forvandle SCSS-koden din til CSS. Raskt, enkelt og sikkert.

Pekepenn til CSS-konvertering

Forvandle SCSS-koden din til CSS. Raskt, enkelt og sikkert.

HSV til CMYK

Konvertere HSV-fargekoder til CMYK-verdier for utskriftsdesign

CSS-filtergenerator

Opprett og visualiser tilpassede CSS-bildefiltre