The Ultimate Guide to Flexbox

The Ultimate Guide to Flexbox

CSS Flexbox (Flexible Box Layout) is a powerful layout system that makes it easy to align, distribute, and position elements inside a container. This guide covers all Flexbox properties with examples.

1. What is Flexbox?

Flexbox helps create responsive layouts by arranging items horizontally or vertically inside a container. It provides automatic alignment, equal spacing, and flexible sizing.

Basic Example

.container {
  display: flex;
}

✅ This makes the .container a Flexbox container, allowing direct child elements to behave as flex items.

2. Flexbox Container Properties

These properties are applied to the parent (flex container).

✅ display: flex;

Turns an element into a flex container.

.container {
  display: flex;
}

✅ flex-direction

Defines the direction of items inside the container.

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

Value	Effect
row	Left to right (default).
row-reverse	Right to left.
column	Top to bottom.
column-reverse	Bottom to top.

Example:

.container {
  flex-direction: column;
}

✅ Items will stack vertically.

✅ justify-content

Controls horizontal alignment.

.container {
  justify-content: center;
}

Value	Effect
flex-start	Items start from the left (default).
flex-end	Items align to the right.
center	Items are centered.
space-between	Items have equal space between them.
space-around	Items have equal space around them.

Example:

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

✅ Items are evenly spread out with space between them.

✅ align-items

Controls vertical alignment.

.container {
  align-items: center;
}

Value	Effect
flex-start	Aligns items to the top.
flex-end	Aligns items to the bottom.
center	Centers items vertically.
stretch	Items fill the container height.

Example:

.container {
  align-items: flex-start;
}

✅ Items align to the top.

✅ align-content

Controls vertical spacing of multiple rows (only applies when flex items wrap).

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

Value	Effect
flex-start	Rows align at the top.
flex-end	Rows align at the bottom.
center	Rows align at the center.
space-between	Even spacing between rows.
space-around	Equal space around rows.

✅ flex-wrap

Controls whether items wrap or stay in one line.

.container {
  flex-wrap: wrap;
}

Value	Effect
nowrap	Items stay in one row (default).
wrap	Items wrap to the next line if needed.
wrap-reverse	Wraps in reverse order.

✅ gap

Sets spacing between items.

.container {
  gap: 10px;
}

✅ Adds equal spacing between items.

3. Flexbox Item Properties

These properties are applied to child elements (flex items) inside the flex container.

✅ order

Controls the order of items.

.item {
  order: 2;
}

✅ Higher values move the item later in the order.

✅ flex-grow

Defines how much extra space an item can take.

.item {
  flex-grow: 1;
}

Value	Effect
0	Default (no extra space).
1+	Expands to take available space.

Example:

.item1 { flex-grow: 2; }
.item2 { flex-grow: 1; }

✅ .item1 takes twice as much space as .item2.

✅ flex-shrink

Defines how much an item shrinks when space is limited.

.item {
  flex-shrink: 0;
}

Value	Effect
0	Prevents shrinking.
1+	Shrinks when needed (default).

✅ flex-basis

Controls the starting size of an item.

.item {
  flex-basis: 200px;
}

✅ Item starts at 200px width/height (before growing or shrinking).

✅ align-self

Overrides align-items for a single item.

.item {
  align-self: center;
}

Value	Effect
flex-start	Aligns at the top.
flex-end	Aligns at the bottom.
center	Centers item vertically.

4. Full Example

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.item {
  background: lightblue;
  padding: 20px;
  text-align: center;
  flex-grow: 1;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

✅ Items are evenly spaced, centered, and flexible.

5. Browser Support

✅ Fully supported in all modern browsers.
🔸 gap might need polyfills in older versions of Internet Explorer.