CSS Flexbox -tuotteet


Sisällysluettelo

    Näytä sisällysluettelo


Lapsielementit (tuotteet)

Joustavan säiliön suorista alielementeistä tulee automaattisesti joustavia (flex) kohteita.

1

2

3

4

Yllä oleva elementti edustaa neljää sinistä flex-elementtiä harmaan flex-säiliön sisällä.

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Flexible Items</h1>

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

<p>All direct children of a flexible container becomes flexible items.</p>

</body>
</html>


Joustavan tuotteen ominaisuudet ovat:

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

Tilauksen omaisuus

Ominaisuus order määrittää joustavien kohteiden järjestyksen.

1

2

3

4

Koodin ensimmäisen joustavan kohteen ei tarvitse esiintyä asettelun ensimmäisenä kohteena.

Tilauksen arvon on oltava numero, oletusarvo on 0.

Esimerkki

Ominaisuus order voi muuttaa joustotuotteiden järjestystä:

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The order Property</h1>

<p>Use the order property to sort the flex items as you like:</p>

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

</body>
</html>



flex-grow -kiinteistö

Ominaisuus flex-grow määrittää, kuinka paljon flex-tuote kasvaa suhteessa muihin joustotuotteisiin.

1

2

3

Arvon on oltava numero, oletusarvo on 0.

Esimerkki

Saa kolmas joustotuote kasvamaan kahdeksan kertaa nopeammin kuin muut flex-tuotteet:

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-grow Property</h1>

<p>Make the third flex item grow eight times faster than the other flex items:</p>

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

</body>
</html>




Joustokutistuva ominaisuus

Ominaisuus flex-shrink määrittää, kuinka paljon flex-kohde kutistuu suhteessa muihin joustaviin tuotteisiin.

1

2

3

4

5

6

7

8

9

10

Arvon on oltava numero, oletusarvo on 1.

Esimerkki

Älä anna kolmannen joustavan esineen kutistua yhtä paljon kuin muiden joustoelementtien:

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-shrink Property</h1>

<p>Do not let the third flex item shrink as much as the other flex items:</p>

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

</body>
</html>



Joustopohjainen omaisuus

Ominaisuus flex-basis määrittää joustavan tuotteen alkuperäisen pituuden.

1

2

3

4

Esimerkki

Aseta kolmannen flex-kohteen alkupituus 200 pikseliin:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-basis Property</h1>

<p>Set the initial length of the third flex item to 200 pixels:</p>

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

</body>
</html>



Joustava ominaisuus

Ominaisuus flex on lyhenne ominaisuus flex-grow-, flex-shrink- ja flex-basis-ominaisuudet.

Esimerkki

Tee kolmannesta joustavasta esineestä ei-kasvattava (0), ei kutistuva (0) ja an alkuperäinen pituus 200 pikseliä:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex Property</h1>

<p>Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:</p>

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

</body>
</html>



Kohdistusominaisuus

Ominaisuus align-self määrittää valitun kohteen tasauksen joustavan säilön sisällä.

align-self -ominaisuus ohittaa säilön align-items-ominaisuuden määrittämän oletusarvon.

1

2

3

4

Näissä esimerkeissä käytämme 200 pikseliä korkeaa säilöä osoittaaksemme paremmin align-self -ominaisuus:

Esimerkki

Kohdista kolmas joustava kohde säiliön keskelle:

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-self Property</h1>

<p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p>

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

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>


Esimerkki

Kohdista toinen joustava osa säiliön yläosaan ja kolmas taipuisa osa säiliön yläosaan säiliön pohja:

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-self Property</h1>

<p>The "align-self: flex-start;" aligns the selected flex item at the top of the container.</p>
<p>The "align-self: flex-end;" aligns the selected flex item at the bottom of the container.</p>

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

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>



CSS Flexbox -kohteiden ominaisuudet

Seuraavassa taulukossa luetellaan kaikki CSS Flexbox Items -ominaisuudet:

align-self

Määrittää joustavan kohteen tasauksen (ohittaa flex-säiliön align-items -ominaisuuden)

flex

Lyhytmuotoinen ominaisuus flex-grow-, flex-shrink- ja flex-pohjalle ominaisuuksia

flex-basis

Määrittää joustavan tuotteen alkuperäisen pituuden

flex-grow

Määrittää, kuinka paljon joustava tuote kasvaa suhteessa muihin saman säilön sisällä oleviin flex-tuotteisiin

flex-shrink

Määrittää, kuinka paljon joustava tuote kutistuu suhteessa muihin saman säilön sisällä oleviin joustotuotteisiin

order

Määrittää saman säilön sisällä olevien taipuvien kohteiden järjestyksen