CSS flex-direction property
The flex-direction property in CSS is used within a flex container to define the direction in which flex items are placed in the flex container. It determines the main axis and thus affects how the items are laid out within the container.
Basic Usage
The flex-direction property is applied to a flex container, and it controls the direction of the main axis, which affects the arrangement of its child elements (flex items).
selector {
flex-direction: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row; /* Change this value to see different directions */
}
.item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
In this example, the flex items will be arranged based on the value assigned to flex-direction.
Values for flex-direction
1. row (default)
- Description: The flex items are laid out horizontally from left to right. The main axis runs from left to right, and the cross axis runs from top to bottom.
- Use Case: This is the default value and is often used for horizontal layouts.
.container {
flex-direction: row; /* Horizontal layout */
}
2. row-reverse
- Description: The flex items are laid out horizontally from right to left. The main axis runs from right to left, and the cross axis runs from top to bottom.
- Use Case: Use this when you want a reversed horizontal layout.
.container {
flex-direction: row-reverse; /* Horizontal layout in reverse order */
}
3. column
- Description: The flex items are laid out vertically from top to bottom. The main axis runs from top to bottom, and the cross axis runs from left to right.
- Use Case: Use this for vertical layouts, such as stacking items in a column.
.container {
flex-direction: column; /* Vertical layout */
}
4. column-reverse
- Description: The flex items are laid out vertically from bottom to top. The main axis runs from bottom to top, and the cross axis runs from left to right.
- Use Case: Use this for a reversed vertical layout.
.container {
flex-direction: column-reverse; /* Vertical layout in reverse order */
}
Practical Examples
Example 1: Horizontal Layout
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
}
.item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
In this example, the items are laid out horizontally in the default row direction.
Example 2: Vertical Layout
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
}
.item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Here, the items are arranged vertically due to flex-direction: column.
Example 3: Reversed Horizontal Layout
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row-reverse;
}
.item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
In this example, the items are arranged horizontally but in reverse order.
Example 4: Reversed Vertical Layout
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column-reverse;
}
.item {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Here, the items are arranged vertically but in reverse order.