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 lines with CSS
The CSS align-content property is used to align flex lines in a flex container when there is extra space in the cross-axis direction. This property only works when flex-wrap is set to wrap or wrap-reverse, creating multiple lines of flex items.
Syntax
selector {
align-content: value;
}
Possible Values
| Value | Description |
|---|---|
stretch |
Lines stretch to take up remaining space (default) |
flex-start |
Lines are packed toward the start of the cross-axis |
flex-end |
Lines are packed toward the end of the cross-axis |
center |
Lines are centered in the cross-axis |
space-between |
Lines are evenly distributed with space between them |
space-around |
Lines are evenly distributed with equal space around each line |
Example: Space Between Flex Lines
The following example demonstrates align-content: space-between to distribute flex lines with equal space between them −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: #ff6b6b;
align-content: space-between;
height: 200px;
width: 400px;
flex-wrap: wrap;
border: 2px solid #333;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 18px;
width: 80px;
margin: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Flex Lines with Space Between</h2>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
<div>Q7</div>
<div>Q8</div>
</div>
</body>
</html>
A red flex container with white bordered boxes labeled Q1-Q8. The flex lines are distributed with maximum space between the top and bottom lines, with no space at the container edges.
Example: Center Alignment
This example shows how to center flex lines within the container −
<!DOCTYPE html>
<html>
<head>
<style>
.centered-container {
display: flex;
background-color: #4ecdc4;
align-content: center;
height: 200px;
width: 400px;
flex-wrap: wrap;
border: 2px solid #333;
}
.centered-container > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 18px;
width: 80px;
margin: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Centered Flex Lines</h2>
<div class="centered-container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</body>
</html>
A teal flex container with white bordered boxes labeled A-F. The flex lines are vertically centered within the container with equal space above and below.
Conclusion
The align-content property controls how flex lines are distributed in the cross-axis when there's extra space. It requires flex-wrap: wrap to create multiple lines and works best with containers that have a defined height.
Updated on: 2026-03-15T13:06:28+05:30
484 Views
Advertisements