What is flex-direction row in CSS: Simple Explanation and Example

flex-direction: row in CSS sets the main axis of a flex container to run horizontally from left to right. This means flex items inside the container are laid out side by side in a row.

How It Works

Imagine you have a row of boxes on a shelf. Setting flex-direction: row in CSS is like arranging those boxes side by side from left to right on that shelf. The shelf is the flex container, and the boxes are the flex items.

By default, flex containers use row direction, so items line up horizontally. This direction defines the main axis along which the items flow. The cross axis runs vertically, so items stack side by side horizontally but can be aligned vertically.

Example

This example shows a flex container with three colored boxes arranged in a row using flex-direction: row. The boxes appear side by side horizontally.

css

html, body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  background-color: white;
  padding: 1rem;
  border: 2px solid #ccc;
}

.box {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.box1 { background-color: #e63946; }
.box2 { background-color: #457b9d; }
.box3 { background-color: #2a9d8f; }

Output

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

When to Use

Use flex-direction: row when you want to arrange items horizontally, like a navigation menu, a toolbar, or a row of buttons. It is perfect for layouts where elements should flow side by side from left to right.

This direction is the default for flex containers, so you only need to set it explicitly if you changed it before or want to be clear in your code.

Key Points

• flex-direction: row arranges flex items horizontally from left to right.
• It defines the main axis as horizontal and the cross axis as vertical.
• This is the default direction for flex containers.
• Items flow side by side in a row, useful for menus, toolbars, and horizontal lists.

Key Takeaways

flex-direction: row lays out flex items horizontally from left to right.

It sets the main axis to horizontal and the cross axis to vertical.

This is the default direction for flex containers in CSS.

Use it for horizontal menus, toolbars, or any side-by-side layout.

You can combine it with other flex properties for alignment and spacing.