CSS Flexbox

1
2
3
4
5
6
7
8

Prova det själv

CSS Flexbox-layoutmodulen

Innan Flexbox-layoutmodulen (kom) fanns följande fyra layoutmodeller tillgängliga:

  • Block, använd för delar (sektioner) på webbsidan
  • Inlin (Inline), använd för text
  • Tabell, använd för tvådimensionella tabelldata
  • Positionering, använd för elementets exakta plats

Flexbox-layoutmodulen, som gör det möjligt att designa flexibla responsiva layoutstrukturer utan att använda flytande eller positionering.

Webbläsarstöd

Alla moderna webbläsare stöder flexbox egenskaper.

29.0 11.0 22.0 10 48

Flexbox-element

För att börja använda Flexbox-modellen måste du först definiera Flex-container.

1
2
3

Ovanstående element representerar en flex-behållare med tre flex-element (blått område).

Exempel

en flex-behållare som innehåller tre flex-element:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Prova det själv

föräldrelementet (behållaren)

Genom att använda display Attributet är satt till flex，flex-behållaren kommer att vara skalbar:

1
2
3

Exempel

.flex-container {
  display: flex;
}

Prova det själv

Här är egenskaperna för flex-behållaren:

flex-direction egenskap

flex-direction Attributet definierar i vilken riktning behållaren ska stapla flex-elementen.

1
2
3

Exempel

column Värdet ställer in vertikalt stapling av flex-element (från upp till ned):

.flex-container {
  display: flex;
  flex-direction: column;
}

Prova det själv

Exempel

column-reverse Värdet staplar flex-elementen vertikalt (men från ned till upp):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Prova det själv

Exempel

row Värdet staplar flex-elementen horisontellt (från vänster till höger):

.flex-container {
  display: flex;
  flex-direction: row;
}

Prova det själv

Exempel

row-reverse Värdet staplar flex-elementen horisontellt (men från höger till vänster):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Prova det själv

flex-wrap egenskap

flex-wrap Attributet bestämmer om flex-elementen ska omradas eller inte.

Följande exempel innehåller 12 flex-element för att bättre demonstrera flex-wrap-attributet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Exempel

wrap Värdet bestämmer att flex-elementen kommer att omradas vid behov:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Prova det själv

Exempel

nowrap Värdet bestämmer att flex-elementen inte ska omradas (standard):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Prova det själv

Exempel

wrap-reverse Värdet bestämmer att om nödvändigt, kommer flex-elementen att omradas i motsatt ordning:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Prova det själv

flex-flow egenskap

flex-flow Attributet är en förkortning för att samtidigt ställa in flex-direction och flex-wrap-attributen.

Exempel

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Prova det själv

justify-content egenskap

justify-content Attributet används för att justera flex-elementen:

1
2
3

Exempel

center Värdet justerar flex-elementen i mitten av behållaren:

.flex-container {
  display: flex;
  justify-content: center;
}

Prova det själv

Exempel

flex-start Värdet justerar flex-elementen på容器的开始 av behållaren (standard):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

Prova det själv

Exempel

flex-end Värdet justerar flex-elementen på容器的末尾 av behållaren:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

Prova det själv

Exempel

space-around Värdet visar flex-element med utrymme före, mellan och efter raderna:

.flex-container {
  display: flex;
  justify-content: space-around;
}

Prova det själv

Exempel

space-between Värdet visar flex-element som har utrymme mellan raderna:

.flex-container {
  display: flex;
  justify-content: space-between;
}

Prova det själv

align-items egenskap

align-items Attributet används för att vertikalt justera flex-elementen.

1
2
3

I dessa exempel använder vi behållare med en höjd på 200 pixlar för att bättre demonstrera align-items-attributet.

Exempel

center Värdet justerar flex-objekten mitt i kontейнern:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Prova det själv

Exempel

flex-start Värdet justerar flex-objekten längst upp i kontейнern:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Prova det själv

Exempel

flex-end Värdet justerar elastiska objektet längst ner i kontейнern:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Prova det själv

Exempel

stretch Värdet sträcker ut flex-objekten för att fylla kontейнern (standard):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Prova det själv

Exempel

baseline Värdet gör att flex-objekten justeras efter baslinjen:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Prova det själv

Observera:Detta exempel använder olika font-size för att demonstrera att objekten har justerats efter textens baslinje:

1
2
3
4

align-content egenskap

align-content Egenskapen används för att justera elastiska linjer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

I dessa exempel använder vi en kontainer med 600 pixlar i höjd och sätter flex-wrap-egenskapen till wrap för att bättre demonstrera align-content-egenskapen.

Exempel

space-between Värdet visar elastiska linjer med lika avstånd mellan dem:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Prova det själv

Exempel

space-around Värdet visar elastiska linjer med utrymme före, mellan och efter:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

Prova det själv

Exempel

stretch Värdet sträcker ut elastiska linjerna för att fylla ut det återstående utrymmet (standard):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

Prova det själv

Exempel

center Värdet visas i mitten av kontейнern med elastiska linjer:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

Prova det själv

Exempel

flex-start Värdet visas på kontейнerns början med elastiska linjer:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

Prova det själv

Exempel

flex-end Värdet visas på kontейнerns slut med elastiska linjer:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

Prova det själv

Perfekt centrering

I följande exempel kommer vi att lösa ett mycket vanligt stilproblem: perfekt centrering.

Lösning: Använd justify-content och align-items Egenskapen sätts till centrerad, och sedan kommer flex-objekten att centreras perfekt:

Exempel

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Prova det själv

Underkomponenter (objekt)

Flex-containerns direkta underkomponenter blir automatiskt elastiska (flex) objekt.

1
2
3
4

Ovanstående element representerar fyra blå flex-komponenter inom en grå flex-behållare.

Exempel

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

Prova det själv

Använda egenskaper för elastiska komponenter inkluderar:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order-egenskapen

order Egenskapen specificerar ordningen på flex-komponenten.

1
2
3
4

Den första flex-komponenten i koden behöver inte visas som det första elementet i layouten.

order Värdet måste vara ett nummer, standardvärdet är 0.

Exempel

order Egenskapen kan ändra ordningen på flex-komponenter.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

Prova det själv

flex-grow-egenskapen

flex-grow Egenskapen specificerar hur mycket en flex-komponent kommer att växa jämfört med andra flex-komponenter.

1
2
3

Värdet måste vara ett nummer, standardvärdet är 0.

Exempel

Gör att den tredje elastiska komponentens tillväxtfart är åtta gånger snabbare än de andra elastiska komponenterna:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

Prova det själv

flex-shrink-egenskapen

flex-shrink Egenskapen specificerar hur mycket en flex-komponent kommer att minska jämfört med andra flex-komponenter.

1
2
3
4
5
6
7
8
9

Värdet måste vara ett nummer, standardvärdet är 0.

Exempel

Låt inte den tredje elastiska komponenten minska lika mycket som de andra elastiska komponenterna:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Prova det själv

flex-basis-egenskapen

flex-basis Egenskapen specificerar den initiala längden för flex-komponenten.

1
2
3
4

Exempel

Ställ in den initiala längden för den tredje elastiska komponenten till 200 pixlar:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Prova det själv

flex-egenskapen

flex Egenskapen är en förkortning av flex-grow, flex-shrink och flex-basis-egenskaperna.

Exempel

Gör den tredje elastiska komponenten oförlänglig (0), oförminskbar (0) och initial längd 200 pixlar:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Prova det själv

align-self-egenskapen

align-self Egenskapen specificerar justeringsmetoden för de valda objekten i den elastiska behållaren.

align-self Egenskapen kommer att överskriva den förvalda justeringen som satts med behållarens align-items egenskap.

1
2
3
4

I dessa exempel använder vi en behållare med en höjd på 200 pixlar för att bättre demonstrera align-self egenskapen:

Exempel

Justera den tredje elastiska objektet till mitten av behållaren:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Prova det själv

Exempel

Justera den andra elastiska objektet till toppen av behållaren, och den tredje elastiska objektet till botten av behållaren:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

Prova det själv

Responsiva bildgallerier med Flexbox

Skapa en responsiv bildgalleri med Flexbox, där galleriet växlar mellan fyra, två eller breda bilder baserat på skärmdimensioner:

Prova det själv

Responsiva webbplatser med Flexbox

Skapa responsiva webbplatser med flexbox, inklusive elastiska navigationsmenyer och elastiskt innehåll:

Prova det själv

CSS Flexbox egenskaper

Följande tabell visar CSS-egenskaper som används tillsammans med flexbox:

Egenskap Beskriver
display Bestämmer användningen av box-typ för HTML-element.
flex-direction Bestämmer riktningen för elastiska objekt inom elastiska behållaren.
justify-content Horisontellt justerar dessa objekt när elastiska objekt inte använder all tillgänglig utrymme på huvudaxeln.
align-items Vertikalt justerar dessa objekt när elastiska objekt inte använder all tillgänglig utrymme på huvudaxeln.
flex-wrap Bestämmer om elastiska objekt bör bytas rad, om det inte finns tillräckligt med utrymme på en flex-linje för att innehålla dem.
align-content Ändrar beteendet för flex-wrap egenskapen. Likt align-items, men den justerar inte elastiska objekten, utan justerar flex-linjen.
flex-flow Kortformsegenskap för flex-direction och flex-wrap.
order Bestämmer ordningen för elastiska objekt jämfört med andra elastiska objekt i samma behållare.
align-self Används för elastiska objekt. Övergår behållarens align-items egenskap.
flex flex-grow, flex-shrink och flex-basis kortformsegenskaperna.