CSS Flexbox

What is Flexbox?

Flexbox (Flexible Box Layout) is a one-dimensional layout model that distributes space and aligns items in a container — either in a row or a column. It solves common layout problems like vertical centering, equal-height columns, and space distribution that were difficult with floats.

Flexbox has two types of elements: the flex container (parent with display: flex) and flex items (direct children).

Flex Container Properties

.container {
    /* Enable flexbox */
    display: flex;          /* block-level flex container */
    display: inline-flex;   /* inline-level flex container */

    /* flex-direction — main axis direction */
    flex-direction: row;            /* â†’ default: left to right */
    flex-direction: row-reverse;    /* â† right to left */
    flex-direction: column;         /* â†“ top to bottom */
    flex-direction: column-reverse; /* â†‘ bottom to top */

    /* flex-wrap — should items wrap? */
    flex-wrap: nowrap;       /* default: all on one line */
    flex-wrap: wrap;         /* wrap to next line */
    flex-wrap: wrap-reverse; /* wrap upward */

    /* flex-flow — shorthand for direction + wrap */
    flex-flow: row wrap;

    /* justify-content — alignment along MAIN axis */
    justify-content: flex-start;    /* default: pack to start */
    justify-content: flex-end;      /* pack to end */
    justify-content: center;        /* center */
    justify-content: space-between; /* equal gaps between items */
    justify-content: space-around;  /* equal gaps around items */
    justify-content: space-evenly;  /* equal gaps everywhere */

    /* align-items — alignment along CROSS axis (single line) */
    align-items: stretch;     /* default: fill cross axis */
    align-items: flex-start;  /* align to start of cross axis */
    align-items: flex-end;    /* align to end */
    align-items: center;      /* center on cross axis */
    align-items: baseline;    /* align text baselines */

    /* align-content — alignment of MULTIPLE lines */
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: stretch;   /* default */

    /* gap — space between items */
    gap: 20px;           /* row and column gap */
    gap: 10px 20px;      /* row-gap column-gap */
    row-gap: 10px;
    column-gap: 20px;
}

Flex Item Properties

.item {
    /* order — visual order (default: 0) */
    order: 2;   /* appears after items with order 0 and 1 */

    /* flex-grow — how much item grows to fill space (default: 0) */
    flex-grow: 1;   /* takes equal share of remaining space */
    flex-grow: 2;   /* takes twice as much as flex-grow: 1 items */

    /* flex-shrink — how much item shrinks when space is tight (default: 1) */
    flex-shrink: 0; /* never shrink */
    flex-shrink: 2; /* shrinks twice as fast */

    /* flex-basis — initial size before grow/shrink (default: auto) */
    flex-basis: 200px;  /* start at 200px */
    flex-basis: 0;      /* start at 0, grow from there */
    flex-basis: auto;   /* use item's width/height */

    /* flex — shorthand: grow shrink basis */
    flex: 1;            /* flex: 1 1 0 — equal flexible items */
    flex: 0 0 200px;    /* fixed 200px, no grow/shrink */
    flex: auto;         /* flex: 1 1 auto */
    flex: none;         /* flex: 0 0 auto — rigid */

    /* align-self — override container's align-items for this item */
    align-self: auto;       /* inherit from container */
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: stretch;
}

Practical Flexbox Patterns

Common Flexbox Patterns

/* Perfect centering — horizontal and vertical */
.center-everything {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Navigation bar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
.nav-links {
    display: flex;
    gap: 20px;
    list-style: none;
}

/* Equal-width columns */
.columns {
    display: flex;
    gap: 20px;
}
.column {
    flex: 1;  /* each column takes equal space */
}

/* Sidebar layout — sidebar fixed, content flexible */
.layout {
    display: flex;
    gap: 20px;
}
.sidebar { flex: 0 0 250px; }  /* fixed 250px */
.content { flex: 1; }          /* takes remaining space */

/* Card grid with wrapping */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.card {
    flex: 1 1 300px;  /* min 300px, grows to fill */
    max-width: 400px;
}

/* Push last item to end */
.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.toolbar .spacer { flex: 1; }  /* pushes items after it to the right */

/* Sticky footer */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main   { flex: 1; }  /* grows to fill space, pushing footer down */
footer { flex-shrink: 0; }

Previous Next

Key Takeaways

Flexbox is a one-dimensional layout system — it handles either a row or a column at a time.
display:flex on the parent makes all direct children flex items.
justify-content aligns items along the main axis; align-items along the cross axis.
flex-wrap:wrap allows items to wrap to the next line when they overflow.
flex:1 on items makes them grow equally to fill available space.
Use gap instead of margins between flex items — it is cleaner and more predictable.
Flexbox is best for components (nav, cards, buttons); use CSS Grid for full page layouts.

Common Mistakes to Avoid

WRONG margin: 0 10px on flex items

RIGHT gap: 10px on flex container

gap is the modern way to space flex items — no need for margin hacks.

WRONG width:50% on flex items without flex-wrap

RIGHT flex:0 0 50% with flex-wrap:wrap

Use flex shorthand to control sizing. Without flex-wrap, items may overflow.

WRONG align-items to center horizontally

RIGHT justify-content to center horizontally

justify-content controls the main axis (horizontal by default). align-items controls the cross axis (vertical by default).

Frequently Asked Questions

Add to the parent: display:flex; justify-content:center; align-items:center;. This centers the child both horizontally and vertically.

flex:1 is shorthand for flex-grow:1; flex-shrink:1; flex-basis:0%. It makes the item grow to fill available space equally with other flex:1 siblings.

Use display:flex; justify-content:space-between; align-items:center; on the nav. Add flex-wrap:wrap and media queries to stack items on mobile.