Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Align Flex Items along Cross Axis using CSS3
We can easily align the flex items along cross axis, but first let us understand what cross axis is. The cross axis is perpendicular to the main axis. The main axis is like the flex direction −
Syntax
.flex-container {
display: flex;
align-items: value;
}
Possible Values for align-items
| Value | Description |
|---|---|
flex-start |
Items align to the start of the cross axis |
flex-end |
Items align to the end of the cross axis |
center |
Items align to the center of the cross axis |
stretch |
Items stretch to fill the container (default) |
baseline |
Items align to their text baseline |
Example: Center Alignment
The following example centers flex items along the cross axis using align-items: center −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
height: 200px;
display: flex;
width: 100%;
align-items: center;
border: 2px solid red;
}
.container div {
width: 100px;
height: 80px;
color: white;
text-align: center;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
}
.first {
background-color: rgb(55, 0, 255);
}
.second {
background-color: red;
}
.third {
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Align flex items along cross axis</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>
Three colored boxes (blue, red, purple) are displayed horizontally within a red border container, vertically centered along the cross axis.
Example: Different Alignment Values
This example demonstrates various alignment options −
<!DOCTYPE html>
<html>
<head>
<style>
.demo-container {
height: 120px;
display: flex;
width: 100%;
border: 2px solid #333;
margin: 10px 0;
}
.demo-container div {
width: 80px;
height: 60px;
background-color: #4CAF50;
color: white;
text-align: center;
font-size: 12px;
margin: 0 5px;
display: flex;
align-items: center;
justify-content: center;
}
.start { align-items: flex-start; }
.end { align-items: flex-end; }
.center { align-items: center; }
.stretch { align-items: stretch; }
.stretch div { height: auto; }
</style>
</head>
<body>
<p>flex-start:</p>
<div class="demo-container start">
<div>Item 1</div>
<div>Item 2</div>
</div>
<p>flex-end:</p>
<div class="demo-container end">
<div>Item 1</div>
<div>Item 2</div>
</div>
<p>center:</p>
<div class="demo-container center">
<div>Item 1</div>
<div>Item 2</div>
</div>
<p>stretch:</p>
<div class="demo-container stretch">
<div>Item 1</div>
<div>Item 2</div>
</div>
</body>
</html>
Four containers showing different alignment behaviors: - flex-start: Items aligned to top of container - flex-end: Items aligned to bottom of container - center: Items aligned to middle of container - stretch: Items stretched to fill container height
Conclusion
The align-items property controls how flex items are positioned along the cross axis. Use center for vertical centering, stretch to fill available space, or flex-start/flex-end for top/bottom alignment.
Updated on: 2026-03-15T15:03:11+05:30
213 Views
Advertisements