Flexbox (Flexible Box Layout) is a CSS layout model designed to make alignment and spacing easier. It is ideal for arranging elements in rows or columns and is widely used in modern web design.
# Why Flexbox?
Before Flexbox, developers relied on floats and positioning, which were difficult to manage. Flexbox solves common layout problems such as:
* Vertical centering
* Equal-height columns
* Responsive alignment

# Creating a Flex Container

.container {
  display: flex;
}

All direct children of the container become flex items.
# Main Axis and Cross Axis

**Main axis:** direction of items (row or column)

**Cross axis:** perpendicular to the main axis

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

Other options include:
* column
* row-reverse
* column-reverse

# Aligning Items Horizontally

Use `justify-content` to align items along the main axis.

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

Common values:

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

# Aligning Items Vertically

Use `align-items` to align along the cross axis.

.container {
  display: flex;
  align-items: center;
}

# Wrapping Flex Items

By default, items stay on one line.

.container {
  display: flex;
  flex-wrap: wrap;
}

This is useful for responsive layouts.
# Flex Item Control

Each child can control how it grows or shrinks.

.item {
  flex: 1;
}

This allows items to share space equally.
Example:

.sidebar {
  flex: 1;
}

.content {
  flex: 3;
}

# When to Use Flexbox

Flexbox is best for:

* Navigation bars
* Cards and components
* One-dimensional layouts (row or column)
* For complex two-dimensional layouts, CSS Grid is often a better choice.