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
Usage of CSS align-content property space-between value
The CSS align-content property with space-between value distributes flex lines evenly within the container, placing equal space between lines with no space at the start and end.
Syntax
selector {
align-content: space-between;
}
Example
The following example demonstrates how space-between distributes flex lines with equal spacing between them −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 200px;
background-color: #f0f0f0;
align-content: space-between;
flex-wrap: wrap;
border: 2px solid #333;
}
.mycontainer > div {
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 60px;
font-size: 18px;
width: 100px;
margin: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>Flex Container with space-between</h3>
<div class="mycontainer">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
</div>
</body>
</html>
A flex container with wrapped items distributed in multiple lines. The first line appears at the top, the last line at the bottom, and any middle lines are evenly spaced between them with equal gaps.
Conclusion
The space-between value for align-content is useful when you want to distribute multiple flex lines with maximum spacing between them. This creates a balanced layout with lines pushed to the container edges.
Updated on: 2026-03-15T13:08:08+05:30
175 Views
Advertisements