CSS Layout – Flexbox

Introduction

Before Flexbox, creating layouts in CSS was difficult and frustrating. Developers relied on floats, tables, and hacks to align elements. Flexbox was introduced to solve layout alignment problems in a clean, predictable way.

Flexbox is designed for one-dimensional layouts, meaning it handles layout in one direction at a time—either row or column. It is perfect for navigation bars, card layouts, forms, buttons, and most UI components.

In this chapter, you will learn:

• What Flexbox is and why it exists
• Core Flexbox concepts (Container vs Items)
• All important Flexbox properties
• Real-world layout examples
• Common mistakes beginners make

Flexbox is a must-know skill for any frontend developer.

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model that allows elements to align properly, distribute space dynamically, and adjust automatically to screen sizes.

.container {
  display: flex;
}

Once display: flex is applied, Flexbox rules start working. The parent becomes the Flex Container and the direct children become Flex Items.

Main Axis and Cross Axis

Flexbox works on two axes. Understanding them is critical.

• Main Axis: The primary direction (default is horizontal/row).
• Cross Axis: The perpendicular direction (default is vertical/column).

flex-direction

Controls the direction of flex items.

.container {
  display: flex;
  flex-direction: row; /* default */
}

Other values: column, row-reverse, column-reverse.

Alignment Properties

justify-content (Main Axis Alignment)

Controls alignment along the main axis.

.container {
  justify-content: space-between;
}

Common values: flex-start, center, flex-end, space-between, space-around, space-evenly.

align-items (Cross Axis Alignment)

Controls alignment along the cross axis.

.container {
  align-items: center;
}

Values: stretch (default), center, flex-start, flex-end, baseline.

Wrapping and Spacing

flex-wrap

Controls whether items stay in one line or wrap.

.container {
  flex-wrap: wrap;
}

Essential for responsive layouts.

gap (Modern & Clean)

Adds spacing between flex items.

.container {
  gap: 16px;
}

Better than using margins.

Flex Item Properties

These properties apply to individual items.

flex-grow

Controls how much space an item grows.

.item {
  flex-grow: 1;
}

flex-shrink

Controls shrinking when space is limited.

.item {
  flex-shrink: 0;
}

flex (Shorthand)

.item {
  flex: 1 1 200px; /* grow shrink basis */
}

Common shorthand: flex: 1;

Real-World Examples

Navbar

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Card Layout

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

Common Beginner Mistakes & Best Practices