Opret den perfekte flexboks Layouts

Visualiser, tilpas og generer CSS flexbox-kode med vores intuitive træk-og-slip-grænseflade. Skab

Beholderegenskaber

Elementegenskaber

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; }
Genereret CSS-kode

Populære Flexbox-forudindstillinger

Centrer vandret og lodret

Content

Perfekt til centrering af et logo, en knap eller et hvilket som helst element både vandret og lodret.

Lige afstand

Item 1
Item 2
Item 3

Skab lige afstand mellem elementer med mellemrum mellem eller mellemrum rundt.

Lodret menu

Home
About
Contact

Byg en lodret navigationsmenu med ensartet afstand og justering.

Responsivt gitter

Box 1
Box 2
Box 3
Box 4
Box 5

Opret et responsivt gitterlayout, der ombryder elementer baseret på tilgængelig plads.

Heltebanner

Hovedtitel

Heltesektion med opfordring til handling

Design et heltebanner med titel, undertekst og en call-to-action-knap.

sidefodslayout

Company

About Us

Careers

Support

Hjælpecenter

Kontakt os

© 2023 Flexbox Generator

Byg en responsiv sidefod med kolonner, der stables på mindre skærme.

den virkelige verden

Navigationslinje

Logo
Home
Products
About
Contact

Et almindeligt navigationslinjelayout med logo til venstre, menupunkter i midten og et indkøbskurvikon til højre.

Card Grid

korttitelkort

her

Beskrivelse af korttitelkort

her

beskrivelse af korttitelkort

her

Et responsivt kortgitter, der tilpasser sig forskellige skærmstørrelser ved hjælp af flexbox-egenskaber.

Egenskaber for artikellayout

Artikeltitel

Udgivet den 1. januar 2023 · 5 min læs

artiklens indhold her. Dette kunne være et kort resumé eller den fulde artikeltekst. Flexbox hjælper med at justere image og tekst på en visuelt tiltalende måde.

Et almindeligt artikellayout med et billede til venstre og tekstindhold til højre, stablet på mobile enheder.

på dashboardlayout

Header
Sidebar
Hovedindhold
Footer

Et dashboardlayout med sidehoved, sidepanel, hovedindholdsområde og sidefod ved hjælp af flexbox til både vandret og lodret justering.

Flexbox Fundamentals

Hvad er Flexbox?

Flexible Box Layout, almindeligvis kendt som Flexbox, er en CSS3-layoutmodel, der giver en effektiv måde at fordele og justere plads mellem varer i en container, selv når deres størrelse er ukendt 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).

Nøglebegreber:Flexbox introducerer to hovedkoncepter:flexcontainerens and the flexvarer. Objektbeholderen er det overordnede element, og elementerne er dets direkte underordnede.

Hovedakse vs krydsakse

Flexbox-layouts er baseret på to akser:main axis and the tværaksen.

  • Hovedakse:langs hvilken flexelementer er lagt ud. Defineret afflex-direction.
  • tværakse:Aksen vinkelret på hovedaksen. Dens retning afhænger af hovedaksens retning.
Hovedakse →
← Egenskaber for krydsaksebeholder
Start
Main
End

Beholderegenskaber

Property Description
display Definerer en fleksibel beholder, indbygget eller blok afhængigt af den angivne værdi.
flex-direction Etablerer hovedaksen og definerer dermed retningen flex-varer placeres i flexbeholderen.
flex-wrap Som standard vil flex-elementer alle forsøge at passe ind på én linje. Du kan ændre det og tillade, at elementerne ombrydes efter behov med denne egenskab.
justify-content Justerer flexelementer langs hovedaksen på den aktuelle linje i flexbeholderen.
align-items Justerer flexelementer langs tværaksen på den aktuelle linje i flexbeholderen.
align-content Justerer en flexcontainers linjer indenfor, når der er ekstra plads i tværaksen.

Vareegenskaber

Property Description
order Som standard er fleksvarer opstillet i kildeordren. Egenskabenorderstyrer dog den rækkefølge, som de vises i i flexcontaineren.
flex-grow Definerer muligheden for, at en flexvare kan vokse, hvis det er nødvendigt. Den accepterer en enhedsløs værdi, der fungerer som en proportion.
flex-shrink Definerer muligheden for, at en flexvare kan formindskes, hvis det er nødvendigt.
flex-basis Definerer den oprindelige størrelse af en fleksvare, før eventuel ledig plads fordeles i henhold til fleksfaktorerne.
align-self Tillader, at standardjusteringen (eller den, der er angivet afalign-itemsfor individuelle flex-elementer.

Related Tools

SCSS til CSS konverter

Omdan din SCSS-kode til CSS. Hurtigt, nemt og sikkert.

Stylus til CSS-konverter

Omdan din SCSS-kode til CSS. Hurtigt, nemt og sikkert.

Sass til CSS konverter

Omdan din Sass-kode til CSS. Hurtigt, nemt og sikkert.

Base64 til CSV-konverter

Konverter Base64-kodede CSV-data til CSV-filer, der kan downloades med det samme. Fungerer lokalt i din browser uden upload af data.

Tæl ord, tegn og mere

Få detaljerede statistikker om din tekst med vores nøjagtige ordtællerværktøj.

Energienhedskonvertering

Konverter mellem forskellige energienheder med præcision og lethed