CSS - align-items Property
CSS align-items property collectively sets the align-self value for all immediate children. In Flexbox, it aligns items on the Cross Axis, while in Grid Layout, it aligns items on the Block Axis within their grid area.
Syntax
align-items: normal | stretch | center | flex-start | flex-end | baseline | initial | inherit;
Property Values
| Value | Description |
|---|---|
| normal | It behaves like 'stretch' for flexbox and grid items, or 'start' for grid items with a defined block size.Default. |
| stretch | The items are stretched to fit the container. |
| center | The items are placed at the center position of the container. |
| flex-start | The items are placed at the beginning position of the container. |
| flex-end | The items are placed at the ending position of the container. |
| start | The items are placed at the beginning of their individual grid cells, in the block direction. |
| end | The items are placed at the end of the their individual grid cells, in the block direction. |
| baseline | The items are placed at the baseline position of the container. |
| initial | This sets the property to its default value. |
| inherit | This inherits the property from the parent element. |
Examples of CSS Align Items Property
The following examples describe the align-items property with different values.
Stretched Flex Items
To stretch the flex items vertically to fill the entire space of the flex container, we use the stretch value. In the following example, stretch value has been used.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
border: 1px dashed black;
height: 200px;
gap: 10px;
}
.flex-container div {
background-color: grey;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>CSS align-items property</h2>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
</div>
</body>
</html>
Centered Flex Items
To align the flex items at the center of the cross axis of a container, we use the center value. In the following example, center value has been used.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: center;
border: 1px dashed black;
height: 200px;
gap: 10px;
}
.flex-container div {
background-color: grey;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>CSS align-items property</h2>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
</div>
</body>
</html>
Flex Items at Starting Position
To align the flex items at the start of the cross axis of a container, we use the flex-start value. In the following example, flex-start value has been used.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: flex-start;
border: 1px dashed black;
height: 200px;
gap: 10px;
}
.flex-container div {
background-color: grey;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>CSS align-items property</h2>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
</div>
</body>
</html>
Flex Items at the Ending Position
To align the flex items at the end of the cross axis of a container, we use the flex-end value. In the following example, flex-end value has been used. −
Example
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: flex-end;
border: 1px dashed black;
height: 200px;
gap: 10px;
}
.flex-container div {
background-color: grey;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>CSS align-items property</h2>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
</div>
</body>
</html>
Flex or Non-flex Items at the Starting Position
To align the flex and non-flex items at the start of the cross axis of a container, we use the start value. In the following example, grid display has been used with start value of align-items.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
align-items: start;
border: 1px dashed black;
height: 200px;
}
.grid-item {
background-color: grey;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>CSS align-items property</h2>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
Flex or Non-flex Items at the Ending Position
To align the flex and non-flex items at the end of the cross axis of a container, we use the end value. In the following example, grid display has been used with end value of align-it.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
align-items: end;
border: 1px dashed black;
height: 200px;
}
.grid-item {
background-color: grey;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>CSS align-items property</h2>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
Flex Items at Baseline
To aligns flex items along their baselines, we use the baseline value. In the following example, baseline value has been used.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: baseline;
border: 1px dashed black;
height: 200px;
gap: 10px;
}
.flex-container div {
background-color: grey;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>CSS align-items property</h2>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
</div>
</body>
</html>
Stretched Flex or Non-Flex Items by Normal
To align the flex or non-flex items to stretch vertically to fill the container, we use the normal value. In the following example, normal value has been used with non-flex items.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
align-items: stretched;
border: 1px dashed black;
height: 200px;
}
.grid-item {
background-color: grey;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>CSS align-items property</h2>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
Supported Browsers
| Property |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| align-items | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |