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 at the beginning of the container with CSS
The CSS justify-content property with the flex-start value is used to align flex items at the beginning of the flex container along the main axis. This is the default behavior for flex containers, positioning items at the start of the container.
Syntax
.container {
display: flex;
justify-content: flex-start;
}
Example
The following example demonstrates how to align flex items at the beginning of the container using justify-content: flex-start −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: #f44336;
justify-content: flex-start;
padding: 10px;
margin: 20px 0;
}
.mycontainer > div {
background-color: #ff9800;
color: white;
text-align: center;
line-height: 60px;
font-size: 18px;
width: 100px;
margin: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Flex Items Aligned at Beginning</h2>
<div class="mycontainer">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
Four orange boxes labeled "Item 1" through "Item 4" are aligned at the left side (beginning) of the red flex container, with no extra space distributed between them.
Conclusion
The justify-content: flex-start property aligns flex items at the beginning of the container along the main axis. This is the default alignment behavior and creates a compact layout with items grouped at the start.
Updated on: 2026-03-15T13:26:37+05:30
210 Views
Advertisements