Flexbox Row Layout — Horizontal Items

Horizontal Row Layout with Flexbox

The most fundamental Flexbox pattern is the horizontal row layout. By setting display: flex on a container, child elements automatically arrange themselves in a horizontal row from left to right (in left-to-right writing systems).

CSS Code

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

.item {
  flex: 1;
}

How It Works

When you apply display: flex to a container, the default flex-direction is row, so children line up horizontally. The gap property adds consistent spacing between items without needing margins.

Setting flex: 1 on each child is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%, which makes all items grow equally to fill the container width. Without flex: 1, items would only be as wide as their content.

Key Properties

Property	Value	Effect
flex-direction	row	Items flow horizontally (default)
gap	16px	Uniform spacing between items
flex: 1	shorthand	Items grow equally to fill space

Variations

• Fixed + Flexible: Set flex: 0 0 200px on one item and flex: 1 on others to create a fixed sidebar with flexible main content.
• Reversed: Use flex-direction: row-reverse to reverse the visual order without changing HTML.
• Wrapping: Add flex-wrap: wrap so items wrap to new lines when the container is too narrow.

This row layout is the foundation for navigation bars, toolbars, card grids, and most horizontal component arrangements in modern web design.