# Learn CSS Flexbox in 10 Minutes

Flexbox is a powerful module in CSS that provides an efficient way to arrange elements in a container — even when their size is unknown or dynamic. Unlike traditional layouts that rely heavily on floats and positioning, Flexbox focuses on distributing space along a single axis (either horizontal or vertical) while allowing flexible alignment and spacing.

## 1\. The Magical Property Flex

With Flexbox, you define a **flex container** and then control how its **flex items** behave inside it — including their size, order, and alignment.

With a parent container with class ‘container‘ and child items inside it. The magic starts with just setting the display to flex:

```css
.container {
  display: flex;
}
```

## 2\. Flexbox Properties

**Flex container properties:**

| **Property** | **Description** | **Example** |
| --- | --- | --- |
| **display** | Defines a flex container (flexorinline-flex) | display: flex; |
| **flex-direction** | Defines the direction of the main axis | flex-direction: row-reverse; |
| **flex-wrap** | Allows items to wrap onto multiple lines | flex-wrap: wrap; |
| **flex-flow** | Shorthand for **flex-direction** and **flex-wrap** | flex-flow: column wrap; |
| **justify-content** | Aligns items along the main axis | justify-content: space-between; |
| **align-items** | Aligns items along the cross-axis | align-items: center; |
| **align-content** | Aligns rows within the container when wrapping | align-content: space-around; |

**Flex item properties:**

| **Property** | **Description** | **Example** |
| --- | --- | --- |
| **order** | Controls the order of the items | order: 2; |
| **flex-grow** | Defines how much a flex item can grow relative to others | flex-grow: 1; |
| **flex-shrink** | Defines how much a flex item can shrink relative to others | flex-shrink: 0; |
| **flex-basis** | Defines the initial size of a flex item before distributing space | flex-basis: 200px; |
| **flex** | Shorthand for **flex-grow, flex-shrink**, and **flex-basis** | flex: 1 0 100px; |
| **align-self** | Overrides **align-items** for an individual item | align-self: flex-end; |

## 3\. Example of a Responsive Two-Column Layout

```css
.container {
  display: flex;
  gap: 1rem;
}
.sidebar {
  flex: 1;
}
.main {
  flex: 3;
}
```