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
Set the flex items horizontally with CSS
Use the flex-direction property with row value to set the flex items horizontally. This is the default behavior for flexbox containers, but explicitly setting it ensures your layout behaves as expected.
Syntax
selector {
display: flex;
flex-direction: row;
}
Possible Values
| Value | Description |
|---|---|
row |
Items are placed horizontally from left to right (default) |
row-reverse |
Items are placed horizontally from right to left |
column |
Items are placed vertically from top to bottom |
column-reverse |
Items are placed vertically from bottom to top |
Example
You can try to run the following code to implement the row value −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
flex-direction: row;
background-color: #2C3E50;
padding: 10px;
}
.mycontainer > div {
background-color: #F7F9F9;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
</div>
</body>
</html>
A heading "Quiz" appears followed by six boxes labeled Q1 through Q6 arranged horizontally in a single row with light gray backgrounds inside a dark blue container.
Conclusion
The flex-direction: row property arranges flex items horizontally from left to right. While this is the default flexbox behavior, explicitly setting it makes your code more readable and ensures consistent layout across different browsers.
Updated on: 2026-03-15T13:27:45+05:30
467 Views
Advertisements