Skapa perfekta Flexbox-layouter

Visualisera, anpassa och generera CSS flexbox-kod med vårt intuitiva dra-och-släpp-gränssnitt.

Egenskaper för behållare

Egenskaper för objekt

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; }
Genererad CSS-kod

Populära Flexbox-förinställningar

Centrera horisontellt och vertikalt

Content

Perfekt för att centrera en logotyp, knapp eller något element både horisontellt och vertikalt.

Lika avstånd

Item 1
Item 2
Item 3

Skapa lika avstånd mellan element med mellanrum mellan eller mellanrum runt.

Vertikal meny

Home
About
Contact

Skapa en vertikal navigeringsmeny med konsekvent avstånd och justering.

Responsivt rutnät

Box 1
Box 2
Box 3
Box 4
Box 5

Skapa en responsiv rutnätslayout som omsluter objekt baserat på tillgängligt utrymme.

Hjälte baner

Huvudtitel

Hjältesektion med uppmaning till handling

Designa en hjältebanner med titel, underrubrik och en Call to Action-knapp.

Layout för sidfot

Company

About Us

Careers

Support

Hjälpcenter

Kontakta oss

© 2023 Flexbox Generator

Bygg en responsiv sidfot med kolumner som staplas på mindre skärmar.

Exempel från verkligheten

Navigeringsfält

Logo
Home
Products
About
Contact

En vanlig layout för navigeringsfältet med logotyp till vänster, menyalternativ i mitten och en kundvagnsikon till höger.

Card Grid

Kortets titel

Kortbeskrivningstext här

Kortets titel

Kortbeskrivningstext här

Kortets titel

Kortbeskrivningstext här

Ett responsivt kortrutnät som anpassar sig till olika skärmstorlekar med hjälp av flexbox-egenskaper.

Artikel Layout

Artikelns titel

Publicerat 1 januari 2023 · 5 minuters läsning

Artikelns innehåll här. Det kan vara en kort sammanfattning eller hela artikeltexten. Flexbox hjälper till att justera bild och text på ett visuellt tilltalande sätt.

En vanlig artikellayout med en bild till vänster och textinnehåll till höger, staplade på mobila enheter.

Layout för instrumentpanel

Header
Sidebar
Huvudsakligt innehåll
Footer

En instrumentpanelslayout med sidhuvud, sidofält, huvudinnehållsområde och sidfot med flexbox för både horisontell och vertikal justering.

Grunderna i Flexbox

Vad är Flexbox?

Flexible Box Layout, allmänt känd som Flexbox, är en CSS3-layoutmodell som ger ett effektivt sätt att fördela och justera utrymmet mellan objekt i en behållare, även när deras storlek är okänd 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).

Viktiga begrepp:Flexbox introducerar två huvudkoncept:Flexibel behållare and the Flexibla artiklar. Behållaren är det överordnade elementet och objekten är dess direkta underordnade.

Huvudaxel kontra tväraxel

Flexbox-layouter är baserade på två axlar:main axis and the Korsande axel.

  • Huvudaxel:Den primära axeln längs vilken flexobjekt läggs ut. Definieras avflex-direction.
  • Tvärgående axel:Axeln vinkelrät mot huvudaxeln. Dess riktning beror på huvudaxelns riktning.
Huvudaxel →
← tväraxel
Start
Main
End

Egenskaper för behållare

Property Description
display Definierar en flexbehållare; infogade eller blockera beroende på det angivna värdet.
flex-direction Etablerar huvudaxeln och definierar på så sätt riktningen som flexartiklar placeras i flexbehållaren.
flex-wrap Som standard kommer alla flexobjekt att försöka passa in på en rad. Du kan ändra det och tillåta att objekten radbryts efter behov med den här egenskapen.
justify-content Justerar flexobjekt längs huvudaxeln på den aktuella raden i flexbehållaren.
align-items Justerar flexobjekt längs korsaxeln för den aktuella linjen i flexbehållaren.
align-content Justerar en flexbehållares linjer inom när det finns extra utrymme på tväraxeln.

Egenskaper för objekt

Property Description
order Som standard placeras flexibla artiklar i källordningen. Emellertid harorderstyr i vilken ordning de visas i flexbehållaren.
flex-grow Definierar möjligheten för en flexartikel att växa vid behov. Den accepterar ett enhetslöst värde som fungerar som en andel.
flex-shrink Definierar möjligheten för en flexartikel att krympa vid behov.
flex-basis Definierar den ursprungliga storleken på en flexartikel innan något tillgängligt utrymme fördelas enligt flexfaktorerna.
align-self Tillåter standardjusteringen (eller den som anges avalign-items) som ska åsidosättas för enskilda flexobjekt.

Related Tools

Skapa perfekta Flexbox-layouter

Visualisera, anpassa och generera CSS flexbox-kod med vårt intuitiva dra-och-släpp-gränssnitt.

Stylus till CSS-omvandlare

Omvandla din SCSS-kod till CSS. Snabbt, enkelt och säkert.

SCSS till CSS-omvandlare

Omvandla din SCSS-kod till CSS. Snabbt, enkelt och säkert.

Hex till Oktal

Konvertera hexadecimala tal till oktala utan ansträngning

Omvandlare av ytenhet

Konvertera mellan olika ytenheter med precision och lätthet

SHA-2 Hash-kalkylator

Generera SHA-2-hashvärden snabbt och enkelt