CSS Flexbox: A Complete Guide for Exams and Interviews

Flex container basics

Setting display: flex on a container makes its direct children flex items. The main axis is horizontal by default.

.container {
    display: flex;              /* enable flexbox */
    flex-direction: row;        /* main axis: horizontal (default) */
    flex-direction: column;     /* main axis: vertical */
    flex-wrap: nowrap;          /* don't wrap (default) */
    flex-wrap: wrap;            /* wrap to next line */
    gap: 16px;                  /* space between items */
}

Alignment properties

justify-content aligns items along the main axis. align-items aligns along the cross axis.

.container {
    /* Main axis (horizontal in row direction) */
    justify-content: flex-start;    /* default */
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between; /* gaps between items */
    justify-content: space-around;  /* gaps around items */
    justify-content: space-evenly;

    /* Cross axis */
    align-items: stretch;           /* default */
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    align-items: baseline;
}

Flex item properties

flex-grow, flex-shrink, and flex-basis control how items size themselves.

.item {
    /* flex shorthand: grow shrink basis */
    flex: 1;        /* flex: 1 1 0% — fills available space */
    flex: 0 0 200px; /* fixed 200px, won't grow or shrink */
    flex: 2;        /* grows twice as fast as flex: 1 items */

    align-self: center;    /* override container's align-items */
    order: -1;             /* reorder visually (default: 0) */

    flex-grow: 1;   /* how much to grow (0 = don't grow) */
    flex-shrink: 0; /* how much to shrink (1 = can shrink) */
    flex-basis: auto; /* initial size before growing/shrinking */
}

Centering with flexbox

Perfectly centering an element — horizontally and vertically — is trivial with flexbox.

/* Center child both ways */
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Sticky footer pattern */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;  /* main grows to push footer down */
}

Common flexbox patterns

These layout patterns appear in every front-end interview. Knowing them by heart lets you write flexbox from memory.

/* Navigation bar: logo left, links right */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 64px;
}

/* Responsive card row that wraps on small screens */
.card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.card { flex: 1 1 280px; }  /* min 280px, grows to fill */

/* Last item pushed to the right */
.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.toolbar .spacer { flex: 1; }  /* pushes next item to far right */

/* Equal-height columns (default flex behaviour) */
.row {
    display: flex;         /* children stretch to tallest by default */
    align-items: stretch;  /* explicit — same as default */
}

Exam tip

The most common flexbox question: "Difference between justify-content and align-items?" — justify-content aligns along the main axis (direction of flex-direction); align-items aligns along the perpendicular cross axis.

Struggling with HTML & CSS?

Work 1:1 with a vetted HTML & CSS tutor on Wyzant. (affiliate link)