Suggest an edit

Improve this article

Refine the answer for “What is Flexbox?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

Flexbox is a layout model in CSS designed for **conveniently arranging elements in one direction: as a row or as a column**. It lets you easily align, distribute, and reorder elements inside a container without using float, tables, or chaotic spacing.

---

### **Key features of Flexbox**

- works inside a **flex container** (`display: flex`)
- direction can be chosen: **horizontal or vertical** (`flex-direction`)
- elements can **stretch, shrink, and distribute** evenly
- there is **flexible centering on both axes** (`justify-content` and `align-items`)
- element order can be changed **without changing the HTML** (`order`)

---

### **What this looks like in CSS**

```css
.container {
  display: flex;
  flex-direction: row;        /* or column */
  justify-content: center;    /* alignment along the main axis */
  align-items: center;        /* alignment along the cross axis */
}
```

---

### **What Flexbox is used for**

- building horizontal menus
- centering elements (vertically and horizontally)
- cards in a row with equal spacing
- responsive blocks that shrink and stretch on their own
- controlling spacing between elements without margin hacks

---

**The essence in one sentence:**
**Flexbox is a flexible single-axis layout system that simplifies the placement and alignment of elements inside a container.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts200 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.