CSS flex-direction Property

CSS flex-direction Property

The flex-direction property in CSS defines the direction of flex items inside a flex container. It determines whether the items should be placed in a row or a column and whether they should be reversed.

1. Syntax

selector {
  flex-direction: row | row-reverse | column | column-reverse;
}

Value	Description
row (default)	Items are placed horizontally (left to right).
row-reverse	Items are placed horizontally in reverse (right to left).
column	Items are placed vertically (top to bottom).
column-reverse	Items are placed vertically in reverse (bottom to top).

2. Basic Example

✅ Default Flex Direction (row)

.container {
  display: flex;
  flex-direction: row;
}

✅ Items are placed in a row (left to right).

✅ Reverse Row (row-reverse)

.container {
  display: flex;
  flex-direction: row-reverse;
}

✅ Items start from the right and move left.

✅ Column Layout (column)

.container {
  display: flex;
  flex-direction: column;
}

✅ Items stack vertically from top to bottom.

✅ Reverse Column (column-reverse)

.container {
  display: flex;
  flex-direction: column-reverse;
}

✅ Items stack vertically from bottom to top.

3. Example – Different flex-direction Values

.container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.item {
  width: 100px;
  height: 50px;
  background: lightblue;
  text-align: center;
  line-height: 50px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

✅ The items appear side by side in a row.

4. Combining with flex-wrap (Using flex-flow)

You can also use flex-flow, which combines flex-direction and flex-wrap:

.container {
  display: flex;
  flex-flow: column wrap;
}

✅ Items stack in a column and wrap when needed.

5. Best Practices

✔ Use row for horizontal layouts.
✔ Use column for vertical layouts.
✔ Combine with justify-content and align-items for better alignment.