De direkta underordnade elementen i en flexbehållare blir automatiskt flexibla (flex)artiklar.
Elementet ovan representerar fyra blå flexartiklar inuti en grå flexbehållare.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Prova själv →
<!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>
Flexobjektets egenskaper är:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
Egenskapen order
anger ordningen på flexartiklarna.
Den första flexposten i koden behöver inte visas som den första posten i layouten.
Ordervärdet måste vara ett tal, standardvärdet är 0.
Egenskapen order kan ändra ordningen på flexartiklarna:
<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 själv →
<!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>
Egenskapen flex-grow
anger hur mycket ett flexobjekt kommer att växa i förhållande till resten av flexobjekten.
Värdet måste vara ett tal, standardvärdet är 0.
Få det tredje flexobjektet att växa åtta gånger snabbare än de andra flexobjekten:
<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 själv →
<!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>
Egenskapen flex-shrink
anger hur mycket ett flexobjekt kommer att krympa i förhållande till resten av flexobjekten.
Värdet måste vara ett tal, standardvärdet är 1.
Låt inte det tredje flexobjektet krympa lika mycket som de andra flexartiklarna:
<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 själv →
<!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>
Egenskapen flex-basis
anger den initiala längden på ett flexobjekt.
Ställ in den ursprungliga längden för det tredje flexobjektet 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 själv →
<!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>
Egenskapen flex
är en förkortningsegenskap för flex-grow
, flex-shrink
och flex-basis
egenskaper.
Gör det tredje flexobjektet inte odlingsbart (0), inte krympbart (0) och med en initial längd på 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 själv →
<!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>
Egenskapen align-self
anger justeringen för det valda objektet i den flexibla behållaren.
Egenskapen align-self
åsidosätter standardjusteringen som ställts in av containerns align-items
-egenskap.
I dessa exempel använder vi en 200 pixlar hög behållare för att bättre demonstrera align-self
-egenskap:
Rikta in det tredje flexobjektet i 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 själv →
<!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>
Rikta in det andra flexobjektet överst på behållaren och det tredje flexobjektet vid 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 själv →
<!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>
Följande tabell listar alla egenskaper för CSS Flexbox Items:
Anger justeringen för ett flexobjekt (åsidosätter flexbehållarens egenskap align-items)
En stenografisk egenskap för flex-grow, flex-shrink och flex-basen egenskaper
Anger den initiala längden för en flexibel artikel
Anger hur mycket ett flexobjekt kommer att växa i förhållande till resten av flexartiklarna i samma behållare
Anger hur mycket ett flexobjekt kommer att krympa i förhållande till resten av flexartiklarna i samma behållare
Anger ordningen på flexartiklarna i samma behållare