CSS Flexbox

1
2
3
4
5
6
7
8

Kokeile itse

CSS Flexbox-asettelumoduuli

Ennen Flexbox-asettelumoduulin (tullessa) käyttöön, käytettävissä olevat asettelumallit ovat seuraavat neljä:

  • Blokki (Block), käytetään verkkosivun osiin (osioihin)
  • Sisäänrakennettu (Inline), käytetään tekstiin
  • Taulukko, käytetään kahdemaarisen taulukodataan
  • Sijoittelu, käytetään elementin selkeään sijaintiin

Joustava ruudukkoon kuuluva moduuli, joka mahdollistaa joustavien vastauksellisten asettelustructuurien suunnittelun ilman, että tarvitsee käyttää virrtoja tai sijoittelua.

Selaimen tuki

Kaikki nykyaikaiset selaimet tukevat flexbox ominaisuudet.

29.0 11.0 22.0 10 48

Flexbox-elementit

Jos haluat aloittaa Flexbox-mallin käytön, sinun täytyy ensin määrittää Flex-container.

1
2
3

Ylempi elementti edustaa flex-konttoria, jossa on kolme flex-projektia (sininen alue).

Esimerkki

Konttori, jossa on kolme flex-projektia:

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

Kokeile itse

Vanhempi elementti (konttori)

Käyttämällä: display Ominaisuus asetetaan: flex，flex-容器 on joustava:

1
2
3

Esimerkki

.flex-container {
  display: flex;
}

Kokeile itse

Tässä on flex-容器属性:

flex-direction-ominaisuus

flex-direction Ominaisuus määrittää, mihin suuntaan konttorin pitäisi kerätä flex-projekteja.

1
2
3

Esimerkki

column Arvo asettaa flex-projektit vertikaalisesti (yltä alas):

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

Kokeile itse

Esimerkki

column-reverse Arvo asettaa flex-projektit vertikaalisesti (alhaalta ylös):

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

Kokeile itse

Esimerkki

row Arvo asettaa flex-projektit horisontaalisesti (vasemmalta oikealle):

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

Kokeile itse

Esimerkki

row-reverse Arvo asettaa flex-projektit horisontaalisesti (oikealta vasemmalle):

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

Kokeile itse

flex-wrap-ominaisuus

flex-wrap Ominaisuus määrää, tulisiko flex-projekteja vaihtaa riville.

Tässä esimerkissä on 12 flex-projektia, jotta flex-wrap-ominaisuus voidaan esitellä paremmin.

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

Esimerkki

wrap Arvo määrää, että flex-projektit vaihtuvat riville tarvittaessa:

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

Kokeile itse

Esimerkki

nowrap Arvo määrää, että flex-projektia ei vaihdeta riville (oletusarvo):

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

Kokeile itse

Esimerkki

wrap-reverse Arvo määrää, että tarvittaessa joustavat projektit vaihtuvat takaperin:

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

Kokeile itse

flex-flow-ominaisuus

flex-flow Ominaisuus on lyhennysominaisuus, joka käytetään samanaikaisesti flex-direction- ja flex-wrap-ominaisuuksien asettamiseen.

Esimerkki

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

Kokeile itse

justify-content-ominaisuus

justify-content Ominaisuus käytetään flex-projektien tasapainottamiseen:

1
2
3

Esimerkki

center Arvo tasapainottaa flex-projektit konttorin keskellä:

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

Kokeile itse

Esimerkki

flex-start Arvo tasapainottaa flex-projektit konttorin alussa (oletusarvo):

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

Kokeile itse

Esimerkki

flex-end Arvo tasapainottaa flex-projektit konttorin loppupäässä:

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

Kokeile itse

Esimerkki

space-around Arvo näyttää flex-projektit, joilla on välit ennen, välissä ja jälkeen riveillä:

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

Kokeile itse

Esimerkki

space-between Arvo näyttää flex-projektien, joilla on välit riveillä:

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

Kokeile itse

align-items-ominaisuus

align-items Ominaisuus käytetään flex-projektien pystysuuntaiseen tasapainottamiseen.

1
2
3

Näissä esimerkeissä käytämme 200 pikselin korkeaa konttoria, jotta align-items-ominaisuus voidaan esitellä paremmin.

Esimerkki

center Arvo tasaa flex-kohdetta konttorin keskellä:

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

Kokeile itse

Esimerkki

flex-start Arvo tasaa flex-kohdetta konttorin yläreunalla:

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

Kokeile itse

Esimerkki

flex-end Arvo tasaa joustavat kohdetta konttorin alareunalla:

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

Kokeile itse

Esimerkki

stretch Arvo venyttää flex-kohdetta täyttääkseen konttorin (oletusarvo):

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

Kokeile itse

Esimerkki

baseline Arvo tekee flex-kohdista peruslinjalla tasatut:

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

Kokeile itse

Huomaa:Tässä esimerkissä käytetään eri font-size-asetuksia esittääksemme, että kohteet ovat tasalla tekstin peruslinjalla:

1
2
3
4

align-content-ominaisuus

align-content Ominaisuus käytetään joustavien linjojen tasaukseen.

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

Näissä esimerkeissä käytämme 600 pikselin korkeaa konttoria ja asetamme flex-wrap-ominaisuuden wrapiksi paremman esittämisen tarkoituksessa align-content-ominaisuuden.

Esimerkki

space-between Arvo näyttää joustavan linjan välillä yhtä suuressa etäisyydessä:

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

Kokeile itse

Esimerkki

space-around Arvo näyttää joustavan linjan ennen, välissä ja jälkeen avaruudella:

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

Kokeile itse

Esimerkki

stretch Arvo venyttää joustavan linjan täyttääkseen jäljelle jäävän tilan (oletusarvo):

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

Kokeile itse

Esimerkki

center Arvo näyttää joustavan linjan konttorin keskellä:

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

Kokeile itse

Esimerkki

flex-start Arvo näyttää joustavan linjan konttorin alussa:

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

Kokeile itse

Esimerkki

flex-end Arvo näyttää joustavan linjan konttorin lopussa:

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

Kokeile itse

Täydellinen keskittäminen

Esimerkissä käsittelemme erittäin yleistä tyylellistä ongelmaa: täydellinen keskittäminen.

Ratkaisu: Asetetaan justify-content ja align-items Asetetaan ominaisuus keskelle, sitten flex-kohde keskittyy täydellisesti:

Esimerkki

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

Kokeile itse

Lapsen elementit (kohteet)

Flex-konttorin suorat lapsen elementit tulevat automaattisesti joustaviksi (flex) kohteiksi.

1
2
3
4

上面的元素代表一个灰色 flex 容器内的四个蓝色 flex 项目。

Esimerkki

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

Kokeile itse

用于弹性项目的属性有：

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

order 属性

order 属性规定 flex 项目的顺序。

1
2
3
4

代码中的首个 flex 项目不必在布局中显示为第一项。

order 值必须是数字，默认值是 0。

Esimerkki

order 属性可以改变 flex 项目的顺序：

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

Kokeile itse

flex-grow 属性

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。

1
2
3

该值必须是数字，默认值是 0。

Esimerkki

使第三个弹性项目的增长速度比其他弹性项目快八倍：

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

Kokeile itse

flex-shrink 属性

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

1
2
3
4
5
6
7
8
9

该值必须是数字，默认值是 0。

Esimerkki

不要让第三个弹性项目收缩得与其他弹性项目一样多：

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

Kokeile itse

flex-basis 属性

flex-basis 属性规定 flex 项目的初始长度。

1
2
3
4

Esimerkki

将第三个弹性项目的初始长度设置为 200 像素：

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

Kokeile itse

flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

Esimerkki

使第三个弹性项目不可增长（0），不可收缩（0），且初始长度为 200 像素：

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

Kokeile itse

align-self 属性

align-self 属性规定弹性容器内所选项目的对齐方式。

align-self Ominaisuus korvaa konttorin align-items ominaisuudella asetetun oletusasennuksen.

1
2
3
4

Näissä esimerkeissä käytämme 200 pikselin korkeaa konttoria, jotta align-self ominaisuus voidaan esitellä paremmin:

Esimerkki

Tasaa kolmannen joustavan elementin konttorin keskelle:

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

Kokeile itse

Esimerkki

Tasaa toisen joustavan elementin konttorin ylälaidalle ja kolmannen joustavan elementin konttorin alalaidalle:

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

Kokeile itse

Responsiivinen kuvakokoelma Flexboxin avulla

Luo responsiivinen kuvakokoelma Flexboxin avulla, joka muuttuu neljästä, kahdesta tai täysin leveästä kuvasta näytön kokoon mukaan:

Kokeile itse

Responsiivinen verkkosivusto Flexboxin avulla

Luo responsiivinen verkkosivusto flexboxin avulla, joka sisältää joustavan navigointipalkin ja joustavan sisällön:

Kokeile itse

CSS Flexbox ominaisuudet

Seuraavassa taulukossa luetellaan CSS-ominaisuudet, joita käytetään flexbox-yhdessä:

Ominaisuus Kuvaus
display Määrittää HTML-elementin laatikon tyyppisyyden.
flex-direction Määrittää joustavan konttorin joustavien elementtien suunnan.
justify-content Tasoittaa nämä elementit horisontaalisesti, kun joustavat elementit eivät käytä kaikkea pääakselin käytettävissä olevaa tilaa.
align-items Tasoittaa nämä elementit pystysuunnassa, kun joustavat elementit eivät käytä kaikkea pääakselin käytettävissä olevaa tilaa.
flex-wrap Määrittää, tulisiko joustaville elementeille vaihtaa rivejä, jos yhdellä flex-järjestyksellä ei ole riittävästi tilaa niille.
align-content Muuttaa flex-wrap ominaisuuden käyttäytymistä. On samanlainen align-items ominaisuuden kanssa, mutta ei tasaa joustavia elementtejä, vaan flex-järjestystä.
flex-flow flex-direction ja flex-wrap ominaisuuksien lyhennetty muoto.
order Määrittää joustavien elementtien järjestys konttorin sisällä olevien muiden joustavien elementtien suhteen.
align-self Käytetään joustavien elementtien kanssa. Korvaa konttorin align-items ominaisuuden.
flex flex-grow、flex-shrink ja flex-basis ominaisuuksien lyhennetty muoto.