CSS Flexbox Complete Guide | One-Dimensional Layouts

Flexbox is one of the most important layout systems in modern CSS. If you already know basic CSS and want real control over alignment, spacing, and layout behavior, Flexbox is where CSS starts to feel logical instead of frustrating.

This is a detailed intermediate-level guide. The goal is not just to show properties, but to explain how Flexbox thinks. You will learn one-dimensional layouts, alignment rules, spacing techniques, and real UI patterns using clear micro explanations and live examples.

---

What is Flexbox?

Flexbox is a one-dimensional layout model. One-dimensional means it works in one direction at a time:

• Horizontal (row)
• Vertical (column)

Flexbox is designed to distribute space, align elements, and adapt layouts dynamically. It removes the need for floats, table hacks, and complex positioning.

Info!
Flexbox always has two roles:
• Flex container – the parent element
• Flex items – direct children only

---

1. display: flex (Starting Point)

Flexbox begins when you apply display: flex to a container. This single line completely changes layout behavior.

<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> <style> .container { display: flex; } .item { background: #dbeafe; padding: 16px; } </style>

Micro explanation: Items line up horizontally because the default main axis is a row.

---

2. flex-direction (Controlling Flow)

flex-direction defines the direction of the main axis.

• row – left to right (default)
• row-reverse – right to left
• column – top to bottom
• column-reverse – bottom to top

<div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> </div> <style> .container { display: flex; flex-direction: column; } .item { background: #dcfce7; padding: 12px; } </style>

Micro explanation: When direction changes, the main axis changes. All alignment logic follows that axis.

Tip!
Before using alignment properties, always ask: “Is my main axis horizontal or vertical?”

---

3. justify-content (Main Axis Alignment)

justify-content controls how items are distributed along the main axis.

Common values:

• flex-start
• center
• space-between
• space-around
• space-evenly

<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <style> .container { display: flex; justify-content: space-between; } .item { background: #fde68a; padding: 12px; } </style>

Micro explanation: Remaining space is distributed between items, not at the edges.

---

4. align-items (Cross Axis Alignment)

align-items aligns items on the cross axis (perpendicular to the main axis).

<div class="container"> <div class="item tall">Tall</div> <div class="item">Normal</div> </div> <style> .container { display: flex; align-items: center; height: 160px; } .item { background: #c7d2fe; padding: 12px; } .tall { height: 100px; } </style>

Micro explanation: Items align vertically because the cross axis is vertical.

---

5. flex-wrap (Multiple Lines)

By default, Flexbox keeps everything on one line. flex-wrap allows items to move onto new lines.

<div class="container"> <div class="item">Box</div> <div class="item">Box</div> <div class="item">Box</div> <div class="item">Box</div> </div> <style> .container { display: flex; flex-wrap: wrap; width: 220px; gap: 10px; } .item { background: #bbf7d0; padding: 16px; width: 90px; } </style>

Micro explanation: Items move to the next row instead of shrinking endlessly.

---

6. flex-grow (Expanding Space)

flex-grow defines how much an item should expand compared to others.

<div class="container"> <div class="item grow1">Grow 1</div> <div class="item grow2">Grow 2</div> </div> <style> .container { display: flex; } .item { background: #dcfce7; padding: 16px; } .grow1 { flex-grow: 1; } .grow2 { flex-grow: 2; } </style>

Micro explanation: The second item receives twice the available space.

---

7. flex-shrink (Preventing Collapse)

flex-shrink controls how items shrink when space is limited.

<div class="container"> <div class="item no-shrink">No Shrink</div> <div class="item">Shrink</div> </div> <style> .container { display: flex; width: 200px; } .item { background: #fde68a; padding: 16px; width: 150px; } .no-shrink { flex-shrink: 0; } </style>

Micro explanation: One item keeps its size while the other adapts.

---

8. gap (Modern Spacing)

gap creates clean spacing without margin hacks.

<div class="container"> <div class="item">Card</div> <div class="item">Card</div> <div class="item">Card</div> </div> <style> .container { display: flex; gap: 24px; } .item { background: #ddd6fe; padding: 20px; } </style>

Micro explanation: Gap only affects internal spacing, not container edges.

---

Common Flexbox Patterns

• Perfect centering
• Navigation bars
• Responsive cards
• Sticky sidebars
• Equal-height layouts

Warning!
Flexbox is not built for full two-dimensional layouts. If you need rows and columns together, use CSS Grid.

---

Final Tips

• Always identify main and cross axes
• Start layout from the container
• Use gap instead of margins
• Combine Flexbox with Grid for advanced layouts

Flexbox mastery comes from understanding behavior, not memorizing properties.

Next lesson: CSS Grid