Flex direction in CSS - Browser Rendering Trace

Render Flow - Flex direction

Parse CSS selector

↓

Match elements with display:flex

↓

Set flex container context

↓

Apply flex-direction property

↓

Arrange flex items along main axis

↓

Calculate cross axis alignment

↓

Paint and composite

The browser reads the CSS, finds elements with display:flex, then applies the flex-direction property to decide the main axis direction. It arranges child items along this axis before painting the final layout.

Render Steps - 5 Steps

Code Added:display: flex;

Before

[container]
  [1]
  [2]
  [3]

→

After

[container]
[1]_[2]_[3]

Setting display:flex changes the container so its children line up in a row by default.

🔧 Browser Action:Creates flex formatting context and triggers layout recalculation.

Code Sample

A flex container with three green boxes arranged horizontally in a row with space between them.

CSS

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

CSS

.container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  border: 1px solid #333;
  padding: 1rem;
}
.item {
  background-color: #4caf50;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  flex: 0 0 auto;
}

Render Quiz - 3 Questions

After applying step 3 (flex-direction: column), how are the items arranged visually?

A Vertically stacked from top to bottom

B Horizontally in a row from left to right

C Horizontally in a row from right to left

D Vertically stacked from bottom to top

Common Confusions - 3 Topics

Why do my flex items stay in a row even after I set flex-direction: row?

Because row is the default flex-direction, setting it explicitly doesn't change the layout. You won't see a visual difference from the default.

💡 If you want a visible change, try column or row-reverse instead.

Why does flex-direction: column stack items vertically but they don't stretch full width?

Actually, flex items DO stretch to full width by default because width is the cross axis and align-items: stretch (default) makes them fill the container width. If they don't, check for overrides like align-items: flex-start, fixed width on items, or margins/padding.

💡 flex-direction controls main axis; cross axis alignment needs align-items.

Why does row-reverse flip the order but not the text inside items?

flex-direction reverses the order of the flex items, but text inside each item stays the same direction unless you also change text direction with CSS.

💡 Use flex-direction for layout order, text-align or direction for text inside.

Property Reference

Property	Value Applied	Main Axis Direction	Visual Effect	Common Use
flex-direction	row	Horizontal (left to right)	Items arranged in a row from left to right	Default horizontal layout
flex-direction	row-reverse	Horizontal (right to left)	Items arranged in a row but reversed order	Right-to-left layouts or reversing order
flex-direction	column	Vertical (top to bottom)	Items stacked vertically from top to bottom	Vertical menus or stacks
flex-direction	column-reverse	Vertical (bottom to top)	Items stacked vertically but reversed order	Reverse vertical stacking

Concept Snapshot

flex-direction sets the main axis direction in a flex container. Default is row (horizontal left to right). Values: row, row-reverse, column, column-reverse. Controls how flex items are laid out visually. Changing it triggers layout recalculation and repaint.