The align-items property in CSS is used to align flex items along the cross-axis within a flex container.
If justify-content controls the horizontal alignment (main axis), align-items controls the vertical alignment (cross axis)—assuming the default flex-direction: row is used.
Syntax:
.flex-container {
align-items: normal | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}
Default Value: stretch
Here are the different property values used for cross-axis alignment, along with their descriptions:
| Value | Description |
|---|---|
stretch |
(Default) Stretches the items to fill the available space on the cross-axis. |
normal |
Behaves as the default alignment; typically acts exactly like stretch. |
center |
Centers the items vertically on the cross-axis. |
flex-start |
Aligns the items to the start edge of the container on the cross-axis (usually the top). |
flex-end |
Aligns the items to the end edge of the container on the cross-axis (usually the bottom). |
baseline |
Aligns the items based on the text baseline of their first line of content. |
initial |
Sets the value of the property to its default value. |
inherit |
Inherits the value of the property from the parent element. |
To see align-items in action, the flex container must have a defined height that is larger than the items inside it.
The stretch value makes flex items fill the container's entire cross-axis. If the items do not have a fixed height, they will stretch to match the tallest item or the height of the container itself.
<!DOCTYPE html>
<html>
<head>
<style>
.container-stretch {
display: flex;
align-items: stretch;
height: 200px;
border: 2px solid navy;
background-color: #f4f4f9;
}
.item {
width: 100px;
background-color: lightblue;
border: 2px solid navy;
margin: 10px;
text-align: center;
padding: 10px;
font-weight: bold;
color: navy;
}
</style>
</head>
<body>
<h4>IntricateDevo: align-items: stretch</h4>
<div class="container-stretch">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</body>
</html>
The center value vertically centers flex items along the container's cross-axis. The items will shrink to fit their content (unless a specific height is set) and float in the exact middle.
<!DOCTYPE html>
<html>
<head>
<style>
.container-center {
display: flex;
align-items: center;
height: 200px;
border: 2px solid navy;
background-color: #f4f4f9;
}
.item {
width: 100px;
background-color: lightblue;
border: 2px solid navy;
margin: 10px;
text-align: center;
padding: 10px;
font-weight: bold;
color: navy;
}
</style>
</head>
<body>
<h4>IntricateDevo: align-items: center</h4>
<div class="container-center">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</body>
</html>
The flex-start value aligns flex items to the start of the container's cross-axis, grouping them at the top.
<!DOCTYPE html>
<html>
<head>
<style>
.container-start {
display: flex;
align-items: flex-start;
height: 200px;
border: 2px solid navy;
background-color: #f4f4f9;
}
.item {
width: 100px;
background-color: lightblue;
border: 2px solid navy;
margin: 10px;
text-align: center;
padding: 10px;
font-weight: bold;
color: navy;
}
</style>
</head>
<body>
<h4>IntricateDevo: align-items: flex-start</h4>
<div class="container-start">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</body>
</html>
The flex-end value aligns flex items to the end of the container's cross-axis, pushing them all the way to the bottom.
<!DOCTYPE html>
<html>
<head>
<style>
.container-end {
display: flex;
align-items: flex-end;
height: 200px;
border: 2px solid navy;
background-color: #f4f4f9;
}
.item {
width: 100px;
background-color: lightblue;
border: 2px solid navy;
margin: 10px;
text-align: center;
padding: 10px;
font-weight: bold;
color: navy;
}
</style>
</head>
<body>
<h4>IntricateDevo: align-items: flex-end</h4>
<div class="container-end">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</body>
</html>
The baseline value aligns flex items so that the invisible "baseline" of their text perfectly lines up across all items. This is incredibly useful when you have items with different font sizes sitting next to each other.
<!DOCTYPE html>
<html>
<head>
<style>
.container-baseline {
display: flex;
align-items: baseline;
height: 200px;
border: 2px solid navy;
background-color: #f4f4f9;
}
.item {
background-color: lightblue;
border: 2px solid navy;
margin: 10px;
padding: 10px;
font-weight: bold;
color: navy;
}
</style>
</head>
<body>
<h4>IntricateDevo: align-items: baseline</h4>
<div class="container-baseline">
<div class="item" style="font-size: 14px;">Small Text</div>
<div class="item" style="font-size: 40px;">Large Text</div>
<div class="item" style="font-size: 24px;">Medium Text</div>
</div>
</body>
</html>
The inherit value causes the flex container to copy the alignment behavior from its immediate parent element.
<!DOCTYPE html>
<html>
<head>
<style>
.parent-container {
/* The parent sets the rule to center */
align-items: center;
border: 2px dashed gray;
padding: 20px;
}
.child-container {
display: flex;
/* The child inherits 'center' from the parent */
align-items: inherit;
height: 150px;
border: 2px solid navy;
background-color: #f4f4f9;
}
.item {
width: 80px;
background-color: lightblue;
border: 2px solid navy;
margin: 10px;
text-align: center;
padding: 10px;
color: navy;
}
</style>
</head>
<body>
<h4>IntricateDevo: align-items: inherit</h4>
<div class="parent-container">
<div class="child-container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</div>
</body>
</html>
The normal value behaves as the default alignment in the flex container. In the vast majority of flexbox scenarios, normal resolves to stretch. You will generally use stretch explicitly when you want to guarantee that behavior across all layouts.
Most modern browsers fully support the align-items property.
Note: Older or less common browsers may have partial support (like Internet Explorer 11 having limited flexbox features, and Opera Mini lacking full support).
Which value of align-items ensures that the text inside multiple flex items lines up perfectly horizontally, regardless of differing font sizes?