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
Role of CSS justify-content property flex-start value
The CSS justify-content property with the flex-start value aligns flex items at the beginning of the main axis (typically the left side in a row layout). This is the default alignment for flexbox containers.
Syntax
.container {
display: flex;
justify-content: flex-start;
}
Example
You can try to run the following code to implement the flex-start value −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: red;
justify-content: flex-start;
height: 100px;
}
.mycontainer > div {
background-color: orange;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
margin: 5px;
color: white;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</div>
</body>
</html>
A webpage displays "Quiz" as a heading followed by a red flex container with four orange boxes labeled Q1, Q2, Q3, and Q4 aligned to the left side (flex-start) of the container.
Conclusion
The justify-content: flex-start value positions flex items at the beginning of the container's main axis. This is particularly useful when you want to ensure items are consistently aligned to the left side regardless of the container's width.
Updated on: 2026-03-15T12:58:17+05:30
256 Views
Advertisements