---
# System prepended metadata

title: 'CSS Flexbox: A Complete Beginner’s Guide'

---

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.