4.css-flexbox.md

Quiz

...

Explorer

CSS

4 lessons

css4

CSS Fundamentals CSS Selectors CSS Box Model CSS Flexbox

~//tutorials/en/css/css-flexbox/edit

~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Loading...

en/tutorials/css/4css-flexbox

# CSS Flexbox

Flexbox lays out items in a **row or column** and handles alignment, order, and space distribution — no floats required.

## The flex container

A flex container is created with `display: flex`. Its direct children become *flex items*.

```css
.toolbar {
  display: flex;
  gap: 0.75rem;
}
```

## Main axis and cross axis

Flex follows an **axis** direction. With `flex-direction: row` (default) the main axis is horizontal; with `column` it's vertical.

```css
.sidebar { flex-direction: column; }
```

## justify-content and align-items

- `justify-content` — alignment along the **main axis**
- `align-items` — alignment along the **cross axis**

```css
.hero {
  display: flex;
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
}
```

Common values: `flex-start`, `center`, `flex-end`, `space-between`, `space-around`.

## Growing and shrinking

`flex: 1` lets an item grow to fill available space. `flex: 0 0 auto` keeps its natural size.

```css
.item { flex: 1; }
```

## The centering trick

Flexbox makes perfect centering one line:

```css
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

~ hackweb.dev