CSS align-items Property
Flex items are positioned vertically, along the cross-axis, by the align-items property.
It accepts these values:
normal(default)stretchcenterflex-startflex-endbaseline
Center
Using center places the flex items midway down the container.
Prompt
Create a flex container with a height of 200px and three numbered flex items. Use align-items: center to vertically center the items. Give the container a light background and each item a distinct background color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items: center</title>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: center;
background-color: #f1f1f1;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-items: center</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
</div>
</body>
</html>
Flex-start
Using flex-start lines the flex items up along the container's top edge.
Prompt
Create a flex container with a height of 200px and three numbered flex items. Use align-items: flex-start to align the items at the top of the container. Give the container a light background and each item a distinct background color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items: flex-start</title>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
background-color: #f1f1f1;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-items: flex-start</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
</div>
</body>
</html>
Flex-end
Using flex-end lines the flex items up along the container's bottom edge.
Prompt
Create a flex container with a height of 200px and three numbered flex items. Use align-items: flex-end to align the items at the bottom of the container. Give the container a light background and each item a distinct background color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items: flex-end</title>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
background-color: #f1f1f1;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-items: flex-end</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
</div>
</body>
</html>
Stretch
Using stretch makes the flex items grow until they fill the container. It behaves the same as the default, normal.
Prompt
Create a flex container with a height of 200px and three numbered flex items. Use align-items: stretch so the items fill the full height of the container. Give the container a light background and each item a distinct background color. Do not set a height on the items.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items: stretch</title>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-items: stretch</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
</div>
</body>
</html>
CSS align-content Property
Where align-items moves items, align-content moves the flex lines themselves, and you only see its effect once flex items wrap onto several lines.
It accepts these values:
stretch(default)centerflex-startflex-endspace-betweenspace-aroundspace-evenly
Center
Here center gathers the flex lines toward the middle of the container.
Prompt
Create a flex container with a height of 400px, flex-wrap: wrap, and align-content: center. Add nine numbered flex items with a width of about 33% so they wrap into multiple lines. Give the container a light background and each item a distinct background color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content: center</title>
<style>
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: center;
background-color: #f1f1f1;
}
.flex-container > div {
width: 30%;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-content: center</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
<div style="background-color:coral;">4</div>
<div style="background-color:lightblue;">5</div>
<div style="background-color:lightgreen;">6</div>
<div style="background-color:coral;">7</div>
<div style="background-color:lightblue;">8</div>
<div style="background-color:lightgreen;">9</div>
</div>
</body>
</html>
Space-between
Here space-between leaves equal space from one flex line to the next.
Prompt
Create a flex container with a height of 400px, flex-wrap: wrap, and align-content: space-between. Add nine numbered flex items with a width of about 33% so they wrap into multiple lines. Give the container a light background and each item a distinct background color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content: space-between</title>
<style>
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
background-color: #f1f1f1;
}
.flex-container > div {
width: 30%;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<h1>align-content: space-between</h1>
<div class="flex-container">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:lightgreen;">3</div>
<div style="background-color:coral;">4</div>
<div style="background-color:lightblue;">5</div>
<div style="background-color:lightgreen;">6</div>
<div style="background-color:coral;">7</div>
<div style="background-color:lightblue;">8</div>
<div style="background-color:lightgreen;">9</div>
</div>
</body>
</html>
True Centering With Flexbox
Centering an item in both directions takes two declarations on the flex container: justify-content: center and align-items: center. Horizontally and vertically, the flex item then sits perfectly in the middle.
Example
Prompt
Create a flex container with a height of 400px that uses both justify-content: center and align-items: center to perfectly center a single flex item. The item should display the text "True Centering". Give the container a light background and the item a distinct background color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>True Centering With Flexbox</title>
<style>
.flex-container {
display: flex;
height: 400px;
justify-content: center;
align-items: center;
background-color: #f1f1f1;
}
.flex-container > div {
padding: 20px;
font-size: 30px;
color: white;
background-color: #4CAF50;
}
</style>
</head>
<body>
<h1>True Centering</h1>
<div class="flex-container">
<div>True Centering</div>
</div>
</body>
</html>