Tutorials › CSS Mastery › Flexbox

Flexbox

6 min read Quiz at the end

Flexbox arranges items in a row or column. Set display: flex on the container. justify-content aligns along the main axis. align-items aligns on the cross axis. gap adds space between all flex items easily.

Flexbox

.container {
    display: flex;
    flex-direction: row;       /* row | column */
    justify-content: center;   /* main axis */
    align-items: center;       /* cross axis */
    gap: 16px;
    flex-wrap: wrap;
}

.item {
    flex: 1;          /* grow and shrink equally */
    flex: 0 0 200px;  /* fixed 200px, no grow/shrink */
}

/* Center anything */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

← Display Property Next: CSS Grid →

Topic Quiz · 5 questions

Test your understanding before moving on

1. justify-content aligns items on:

💡 justify-content aligns items along the main axis (row direction by default).

2. align-items aligns items on:

💡 align-items aligns items on the cross axis (perpendicular to main axis).

3. How do you centre both horizontally and vertically?

💡 Flexbox centering: display:flex; justify-content:center; align-items:center.

4. flex-wrap: wrap does what?

💡 flex-wrap: wrap lets items flow to a new line instead of shrinking.

5. flex: 1 means:

💡 flex: 1 = flex-grow: 1, flex-shrink: 1, flex-basis: 0% — equal flexible sizing.

Quick Access

Flexbox

Flexbox

Test your understanding before moving on