CssHow-ToBeginner · 4 min read

How to Use flex-direction in CSS for Flexible Layouts

Use the flex-direction property in CSS to set the direction in which flex items are placed inside a flex container. It accepts values like row, column, row-reverse, and column-reverse to arrange items horizontally or vertically, forwards or backwards.

📐

Syntax

The flex-direction property defines the main axis direction for flex items inside a flex container.

row: Items are placed left to right (default).
row-reverse: Items are placed right to left.
column: Items are placed top to bottom.
column-reverse: Items are placed bottom to top.

css

flex-direction: row | row-reverse | column | column-reverse;

💻

Example

This example shows a flex container with three colored boxes arranged vertically using flex-direction: column. Change the value to see how the layout changes.

css

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}
.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100vh;
  padding: 1rem;
  background-color: #f0f0f0;
}
.box {
  background-color: #4a90e2;
  color: white;
  padding: 1rem;
  text-align: center;
  border-radius: 0.5rem;
  font-weight: bold;
}

/* To test other directions, change flex-direction to row, row-reverse, or column-reverse */

Output

⚠️

Common Pitfalls

One common mistake is forgetting to set display: flex; on the container before using flex-direction. Without it, flex-direction has no effect.

Another pitfall is confusing row-reverse and column-reverse with just flipping the order visually; they reverse the main axis direction, which can affect alignment and scrolling.

css

/* Wrong: flex-direction without flex container */
.container {
  flex-direction: row;
}

/* Correct: flex container with flex-direction */
.container {
  display: flex;
  flex-direction: row;
}

📊

Quick Reference

Value	Description
row	Items laid out horizontally from left to right (default)
row-reverse	Items laid out horizontally from right to left
column	Items laid out vertically from top to bottom
column-reverse	Items laid out vertically from bottom to top

✅

Key Takeaways

Always set display: flex; on the container before using flex-direction.

flex-direction controls the main axis direction of flex items: horizontal or vertical.

Use row or row-reverse for horizontal layouts, and column or column-reverse for vertical layouts.

Reversed directions flip the order and direction of items, affecting layout and alignment.

Experiment with different values to create flexible and responsive designs easily.