CSS Flexbox Crash Course

Understanding the Flex Container

2 min read Last updated 45 minutes ago

Flexbox turns a container's children into flexible items arranged along an axis.

Enabling flexbox

css

.container {
    display: flex;
}

That single declaration makes the container a flex container and its direct children flex items.

Main axis and cross axis

css

.container {
    display: flex;
    flex-direction: row;       /* default */
}

flex-direction: row → items flow left-to-right (main axis is horizontal)
flex-direction: column → items flow top-to-bottom (main axis is vertical)

css

.container {
    display: flex;
    flex-direction: column;
}

✓

Visualize the axes

Imagine arrows: the main axis points in the direction items flow; the cross axis is perpendicular to it. justify-content works on the main axis, align-items on the cross axis.

Justify and align

css

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

Common justify-content values: flex-start, center, flex-end, space-between, space-around, space-evenly.

html

<nav class="navbar">
    <a href="/">Home</a>
    <a href="/tutorials">Tutorials</a>
    <a href="/tools">Tools</a>
    <a href="/contact">Contact</a>
</nav>

css

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #4d4d4d;
}

The links spread across the full width with equal space between them — no floats, no tables.

Next Flex Items: grow, shrink and basis