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
Display the flex items with space between the lines in CSS
The CSS justify-content property with the space-between value distributes flex items evenly across the main axis, placing the first item at the start and the last item at the end, with equal space between all items.
Syntax
selector {
display: flex;
justify-content: space-between;
}
Example
You can try to run the following code to implement the space-between value −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: #f44336;
justify-content: space-between;
padding: 10px;
width: 500px;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 60px;
font-size: 20px;
width: 80px;
height: 60px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h1>Quiz Layout</h1>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>
A red container with four white quiz boxes (Q1, Q2, Q3, Q4) evenly distributed across the width. The first box is positioned at the far left, the last box at the far right, and the middle boxes have equal spacing between them.
Conclusion
The justify-content: space-between property is perfect for creating evenly spaced layouts where you want maximum separation between flex items. This technique is commonly used for navigation bars, button groups, and card layouts.
Updated on: 2026-03-15T13:23:11+05:30
242 Views
Advertisements