10 Flexbox Basics You Need to Know

Flexbox is one of the most powerful tools in CSS for creating layouts. Whether you’re designing a simple component or a full-page layout, understanding these basics will save you time and headaches. Below are 10 essential Flexbox concepts with working examples.

---

1. Center Anything (Vertically & Horizontally)

Flexbox makes centering elements simple. Use justify-content and align-items together.

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

---

2. Flex Row vs Flex Column

Default flex direction is row, but you can switch to column.

div.row {
  display: flex;
  flex-direction: row;
}
div.column {
  display: flex;
  flex-direction: column;
}

---

3. Reverse Order Flex

Use flex-direction: row-reverse or column-reverse to invert order.

div {
  display: flex;
  flex-direction: row-reverse;
}

---

4. Equal Spacing Between Items

justify-content: space-between distributes items evenly.

div {
  display: flex;
  justify-content: space-between;
}

---

5. Align Items Top, Center, Bottom

Use align-items to control vertical alignment.

div.item {
  align-self: flex-start | center | flex-end;
}

---

6. Flexible Item Grows to Fill Space

Use flex: 1 to make an item expand.

div.flexible {
  flex: 1;
}

---

7. Shrink Item Only When Needed

Use flex-shrink to control shrinking.

div {
  flex-shrink: 1 | 0;
}

---

8. Fixed + Flexible Combo

Combine fixed width and flexible items in the same row.

div.fixed { width: 100px; }
div.flexible { flex: 1; }

---

9. Wrap Items onto Next Line

Use flex-wrap: wrap for responsive rows.

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

---

10. Equal-Width Items

All items take equal space using flex:1.

div.item {
  flex: 1;
}

---

These 10 Flexbox basics will help you tackle almost any layout challenge. Practice these snippets in your projects, and you’ll soon find Flexbox indispensable for modern CSS design.