CSS Flexbox

1
2
3
4
5
6
7
8

亲自试一试

CSS Flexbox Layout Module

Før Flexbox-layoutmodulen (blev lanceret), var der tilgængelige fire forskellige layoutmønstre:

  • blok (Block), brugt til dele af en webside (sektion)
  • inline (Inline), brugt til tekst
  • tabeller, brugt til to维表数据
  • positionering, brugt til elementernes præcise placering

Flexbox-layoutmodulen, som gør det lettere at designe fleksible responsive layoutstrukturer uden at bruge flydende eller positionering.

browser-understøttelse

alle moderne browsere understøtter flexbox egenskaber.

29.0 11.0 22.0 10 48

Flexbox-elementer

For at begynde at bruge Flexbox-modellen, skal du først definere en Flex-container.

1
2
3

Disse elementer repræsenterer en flex-kontainer med tre fleksible elementer (blåt område).

实例

en flex-kontainer med tre fleksible elementer:

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

亲自试一试

forældreelementet (kontaineren)

ved at bruge display Egenskaben sættes til flexflex-kontaineren vil være skalérbar:

1
2
3

实例

.flex-container {
  display: flex;
}

亲自试一试

Her er egenskaberne for flex-kontaineren:

flex-direction egenskab

flex-direction Egenskaben definerer, i hvilken retning kontaineren skal overlappe fleksible elementer.

1
2
3

实例

column Værdien sætter vertikale fleksible elementer (fra top til bund):

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

亲自试一试

实例

column-reverse Værdien lægger fleksible elementer vertikalt (fra bund til top):

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

亲自试一试

实例

row Værdien lægger fleksible elementer horisontalt (fra venstre til højre):

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

亲自试一试

实例

row-reverse Værdien lægger fleksible elementer horisontalt (fra højre til venstre):

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

亲自试一试

flex-wrap egenskab

flex-wrap Egenskaben bestemmer, om fleksible elementer skal rulles hen over.

Dette eksempel indeholder 12 fleksible elementer for bedre at demonstrere flex-wrap-egenskaben.

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

实例

wrap Værdien bestemmer, at de fleksible elementer skal rulles hen over, hvis nødvendigt:

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

亲自试一试

实例

nowrap Værdien bestemmer, at der ikke skal rulles hen over de fleksible elementer (standard):

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

亲自试一试

实例

wrap-reverse Værdien bestemmer, om de fleksible elementer skal rulles hen over i omvendt rækkefølge, hvis nødvendigt:

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

亲自试一试

flex-flow egenskab

flex-flow Egenskaben er en kortform for at sætte både flex-direction og flex-wrap egenskaber.

实例

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

亲自试一试

justify-content egenskab

justify-content Egenskaben bruges til at justere flex-elementer:

1
2
3

实例

center Værdien justerer flex-elementerne i midten af kontaineren:

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

亲自试一试

实例

flex-start Værdien justerer flex-elementerne til begyndelsen af kontaineren (standard):

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

亲自试一试

实例

flex-end Værdien justerer flex-elementerne til enden af kontaineren:

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

亲自试一试

实例

space-around Værdien viser flex-elementer med mellemrum før, mellem og efter rækkerne:

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

亲自试一试

实例

space-between Værdien viser flex-elementer med mellemrum mellem rækkerne:

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

亲自试一试

align-items egenskab

align-items Egenskaben bruges til at justere flex-elementer lodret.

1
2
3

I disse eksempler bruger vi et container med en højde på 200 pixels for at demonstrere align-items-egenskaben bedre.

实例

center Værdien justerer fleksible elementer i midten af kontaineren:

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

亲自试一试

实例

flex-start Værdien justerer fleksible elementer i toppen af kontaineren:

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

亲自试一试

实例

flex-end Værdien justerer fleksible elementer i bunden af kontaineren:

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

亲自试一试

实例

stretch Værdien strækker fleksible elementer for at fylde kontaineren (standard):

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

亲自试一试

实例

baseline Værdien gør fleksible elementer baselines justerede:

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

亲自试一试

Bemærk:Dette eksempel bruger forskellige font-size-værdier til at demonstrere, at elementerne er justeret efter tekstens baselines:

1
2
3
4

align-content egenskab

align-content Egenskaben bruges til at justere fleksible linjer.

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

I disse eksempler bruger vi en kontainer med en højde på 600 pixels og sætter flex-wrap-egenskaben til wrap for bedre at demonstrere align-content-egenskaben.

实例

space-between Værdien viser fleksible linjer med lige mellemrum mellem dem:

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

亲自试一试

实例

space-around Værdien viser fleksible linjer med mellemrum før, mellem og efter:

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

亲自试一试

实例

stretch Værdien strækker fleksible linjer for at tage op det resterende rum (standard):

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

亲自试一试

实例

center Værdien vises i midten af kontaineren med fleksible linjer:

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

亲自试一试

实例

flex-start Værdien vises i toppen af kontaineren med fleksible linjer:

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

亲自试一试

实例

flex-end Værdien vises i bunden af kontaineren med fleksible linjer:

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

亲自试一试

Perfekt centreret

I nedenstående eksempel vil vi løse et meget almindeligt stilproblem: Perfekt centreret.

Løsning: Brug justify-content og align-items Egenskaben er indstillet til centreret, derefter vil flex-elementerne blive perfekt centreret:

实例

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

亲自试一试

Underelementer (elementer)

Flex-containereleks direkte underelementer bliver automatisk fleksible (flex) elementer.

1
2
3
4

Disse elementer repræsenterer fire blå fleksible items inden for en grå fleksibel beholder.

实例

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

亲自试一试

Egenskaberne, der bruges til fleksible items, er:

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

order egenskab

order Egenskaben definerer rækkefølgen af fleksible items.

1
2
3
4

Det første flex item i koden behøver ikke at vises som det første element i layoutet.

order Værdien skal være et tal, standardværdien er 0.

实例

order Egenskaben kan ændre rækkefølgen af fleksible items.

<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>

亲自试一试

flex-grow egenskab

flex-grow Egenskaben definerer hvor meget en flex item vil vokse i forhold til de andre flex items.

1
2
3

Værdien skal være et tal, standardværdien er 0.

实例

Gør den tredje fleksible items vækst hastighed otte gange hurtigere end de andre fleksible items:

<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>

亲自试一试

flex-shrink egenskab

flex-shrink Egenskaben definerer hvor meget en flex item vil kontrahere i forhold til de andre flex items.

1
2
3
4
5
6
7
8
9

Værdien skal være et tal, standardværdien er 0.

实例

Lad den tredje fleksible item ikke kontrahere så meget som de andre fleksible items:

<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>

亲自试一试

flex-basis egenskab

flex-basis Egenskaben definerer den inital længde for en flex item.

1
2
3
4

实例

Sæt den tredje fleksible items initial længde til 200 pixels:

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

亲自试一试

flex egenskab

flex Egenskaben er en forkortelse for egenskaberne flex-grow, flex-shrink og flex-basis.

实例

Gør den tredje fleksible item uudvidelig (0), uudvidelig (0) og med en initial længde på 200 pixels:

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

亲自试一试

align-self egenskab

align-self Egenskaber definerer justeringsmåden for de valgte elementer i en fleksibel beholder.

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

1
2
3
4

在这些例子中，我们使用 200 像素高的容器，以便更好地演示 align-self 属性：

实例

把第三个弹性项目对齐到容器的中间：

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

亲自试一试

实例

将第二个弹性项目在容器顶部对齐，将第三个弹性项目在容器底部对齐：

<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>

亲自试一试

使用 Flexbox 的响应式图库

使用 flexbox 创建响应式图像库，该图像库根据屏幕大小在四幅、两幅或全宽图像之间变化：

亲自试一试

使用 Flexbox 的响应式网站

使用 flexbox 创建响应式网站，其中包含弹性导航栏和弹性内容：

亲自试一试

CSS Flexbox 属性

下表列出了与 flexbox 一起使用的 CSS 属性：

属性 描述
display 规定用于 HTML 元素的盒类型。
flex-direction 规定弹性容器内的弹性项目的方向。
justify-content 当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。
align-items 当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。
flex-wrap 规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。
align-content 修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。
flex-flow flex-direction 和 flex-wrap 的简写属性。
order 规定弹性项目相对于同一容器内其余弹性项目的顺序。
align-self 用于弹性项目。覆盖容器的 align-items 属性。
flex flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。