Flex container in CSS - Browser Rendering Trace

Render Flow - Flex container

[Parse CSS] -> [Find selector: .container] -> [Apply display:flex] -> [Create flex formatting context] -> [Arrange children as flex items] -> [Calculate main and cross axis] -> [Layout flex items] -> [Paint and Composite]

The browser reads the CSS, finds the flex container selector, applies display:flex, creates a flex formatting context, then arranges and lays out the children along the main and cross axes before painting.

Render Steps - 4 Steps

Code Added:<div class="container"> with three child <div>s

Before

[ ]
(empty container, no children visible)

→

After

[ ]
[Item 1]
[Item 2]
[Item 3]

Adding three child divs inside the container shows them stacked vertically by default.

🔧 Browser Action:Creates DOM tree with container and children; default block layout

Code Sample

A container with three boxes arranged side by side in a row with space between them.

CSS

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

CSS

.container {
  display: flex;
  border: 2px solid #333;
  padding: 1rem;
  gap: 1rem;
}

Render Quiz - 3 Questions

After applying step 2 (display:flex), how are the child items arranged?

A In a horizontal row, side by side

B Stacked vertically, one on top of another

C Overlapping each other

D Hidden from view

Common Confusions - 3 Topics

Why do the child divs line up horizontally instead of stacking vertically?

Because display:flex changes the container to flex layout, which arranges children in a row by default (see step 2).

💡 Flex container arranges children in a row unless flex-direction changes.

Why is there no space between the flex items before adding gap?

By default, flex items have no gap; adding gap property creates space between them (see step 3).

💡 Use gap to add consistent spacing between flex items.

Why does the container have space inside its border?

Because padding adds space inside the container edges, pushing content inward (see step 4).

💡 Padding creates inner space inside containers.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	flex	N/A	Creates flex container, children become flex items	Start flex layout
flex-direction	row (default)	Main axis: horizontal	Items arranged in a row from left to right	Set main axis direction
gap	1rem	Between flex items	Adds space between flex items	Control spacing
justify-content	flex-start (default)	Main axis	Aligns items at start horizontally	Align items horizontally
align-items	stretch (default)	Cross axis: vertical	Items stretch to container height	Align items vertically
padding	1rem	N/A	Adds space inside container edges	Create inner spacing
border	2px solid #333	N/A	Draws border around container	Visual container boundary

Concept Snapshot

Flex container uses display:flex to arrange children in a row by default. Children become flex items laid out along the main axis. Use gap to add space between items. Padding adds space inside container edges. Border visually frames the container. Flexbox simplifies horizontal and vertical alignment.