Joustavan säiliön suorista alielementeistä tulee automaattisesti joustavia (flex) kohteita.
Yllä oleva elementti edustaa neljää sinistä flex-elementtiä harmaan flex-säiliön sisällä.
<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
Ominaisuus order
määrittää joustavien kohteiden järjestyksen.
Koodin ensimmäisen joustavan kohteen ei tarvitse esiintyä asettelun ensimmäisenä kohteena.
Tilauksen arvon on oltava numero, oletusarvo on 0.
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>
Ominaisuus flex-grow
määrittää, kuinka paljon flex-tuote kasvaa suhteessa muihin joustotuotteisiin.
Arvon on oltava numero, oletusarvo on 0.
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>
Ominaisuus flex-shrink
määrittää, kuinka paljon flex-kohde kutistuu suhteessa muihin joustaviin tuotteisiin.
Arvon on oltava numero, oletusarvo on 1.
Ä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>
Ominaisuus flex-basis
määrittää joustavan tuotteen alkuperäisen pituuden.
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>
Ominaisuus flex
on lyhenne ominaisuus flex-grow
-, flex-shrink
- ja flex-basis
-ominaisuudet.
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>
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.
Näissä esimerkeissä käytämme 200 pikseliä korkeaa säilöä osoittaaksemme paremmin align-self
-ominaisuus:
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>
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>
Seuraavassa taulukossa luetellaan kaikki CSS Flexbox Items -ominaisuudet:
Määrittää joustavan kohteen tasauksen (ohittaa flex-säiliön align-items -ominaisuuden)
Lyhytmuotoinen ominaisuus flex-grow-, flex-shrink- ja flex-pohjalle ominaisuuksia
Määrittää joustavan tuotteen alkuperäisen pituuden
Määrittää, kuinka paljon joustava tuote kasvaa suhteessa muihin saman säilön sisällä oleviin flex-tuotteisiin
Määrittää, kuinka paljon joustava tuote kutistuu suhteessa muihin saman säilön sisällä oleviin joustotuotteisiin
Määrittää saman säilön sisällä olevien taipuvien kohteiden järjestyksen