CSS Flex Items
Any element placed directly inside a flex container turns into a flex item without further work.
These are the properties available to flex items:
order— decides where an item appears in the display sequence of the containerflex-grow— decides how far an item expands compared with its siblingsflex-shrink— decides how far an item contracts compared with its siblingsflex-basis— gives an item the length it starts fromflex— combinesflex-grow,flex-shrink, andflex-basisinto a single shorthandalign-self— aligns one particular item inside the container
CSS order Property
Source order and visual order can differ: whichever flex item comes first in the code need not come first in the layout. Inside the flex container, order decides the sequence.
It must be given a number, and that number defaults to 0.
Example
Each item below carries an order value that sets its place in the layout:
Prompt
Create a flex container with four items labeled 1 through 4. Use the CSS order property to display them in the order: 4, 2, 1, 3 (item 1 has order 3, item 2 has order 2, item 3 has order 4, item 4 has order 1).
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS order Property</title>
<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>The order Property</h1>
<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>
CSS flex-grow Property
A number given to flex-grow says how far an item expands compared with its siblings.
Nothing other than a number is valid here, and the default is 0.
Example
The third item here grows four times faster than its two siblings:
Prompt
Create a flex container with three items. Give items 1 and 2 a flex-grow of 1, and give item 3 a flex-grow of 4 so it grows four times faster than the others.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS flex-grow Property</title>
<style>
.flex-container {
display: flex;
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>
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 4">3</div>
</div>
</body>
</html>
CSS flex-shrink Property
A number given to flex-shrink says how far an item contracts compared with its siblings.
Again only a number is valid, but this time the default is 1.
Example
Here the third item shrinks twice as much as all the others:
Prompt
Create a flex container with six items labeled 1 through 6. Set the width of each item to 100px. Give the third item a flex-shrink value of 2 so it shrinks twice as much as the others.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS flex-shrink Property</title>
<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>The flex-shrink Property</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 2">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
CSS flex-basis Property
An item's starting length comes from flex-basis.
Example
The third item here begins at a length of 250 pixels:
Prompt
Create a flex container with four items. Set the third item to have a flex-basis of 250px, giving it a larger initial length than the other items.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS flex-basis Property</title>
<style>
.flex-container {
display: flex;
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-basis Property</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 250px">3</div>
<div>4</div>
</div>
</body>
</html>
CSS flex Property
Instead of three separate declarations for flex-grow, flex-shrink, and flex-basis, you can write the single shorthand flex.
Example
The third item here can grow (1), cannot shrink (0), and starts at a length of 150 pixels:
Prompt
Create a flex container with four items. Use the flex shorthand property on the third item with values 1 0 150px (growable, not shrinkable, initial length 150px).
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS flex Shorthand Property</title>
<style>
.flex-container {
display: flex;
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 Property</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 1 0 150px">3</div>
<div>4</div>
</div>
</body>
</html>
CSS align-self Property
The container's align-items property sets a default alignment. For one specific item inside the flex container, align-self overrides that default.
Align-self center
The third item sits in the middle of the container here:
Prompt
Create a flex container with a height of 200px and four items. Use align-self to center the third item vertically in the middle of the container.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS align-self center</title>
<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>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
</body>
</html>
Align-self flex-start and flex-end
The second item moves to the top of the container here, and the third moves to the bottom:
Prompt
Create a flex container with a height of 200px and four items. Use align-self to align the second item to flex-start (top) and the third item to flex-end (bottom).
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS align-self flex-start and flex-end</title>
<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>
<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>
</body>
</html>
The CSS Flex Items Properties
Every flex item property, in alphabetical order:
align-self— aligns one flex item, overriding thealign-itemsproperty of its flex containerflex— shorthand coveringflex-grow,flex-shrink, andflex-basisflex-basis— gives a flex item its starting lengthflex-grow— sets how far a flex item expands compared with the othersflex-shrink— sets how far a flex item contracts compared with the othersorder— sets where flex items appear in the sequence inside the container