CSS Flexbox Cheatsheet

Table of Contents

Use CSS Flexbox to control the layout of HTML elements in a single dimension (horizontal or vertical).

Simple example

.container {
    display: flex;
}

.container > div {
    flex: 1 1 auto;
}

Container

.container {
    display: flex;
    display: inline-flex;

    flex-direction: row; /* ltr - default */
    flex-direction: row-reverse; /* rtl */
    flex-direction: column; /* top-bottom */
    flex-direction: column-reverse; /* bottom-top */

    flex-wrap: nowrap; /* one-line */
    flex-wrap: wrap; /* multi-line */

    align-items: flex-start; /* vertical-align to top */
    align-items: flex-end; /* vertical-align to bottom */
    align-items: center; /* vertical-align to center */
    align-items: stretch; /* same height on all (default) */

    justify-content: flex-start; /* horizontal alignment - default */
    justify-content: flex-end;
    justify-content: center;
}

Child

.container > div {
    /* This: */
    flex: 1 0 auto;

    /* Is equivalent to this: */
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;

    order: 1;

    align-self: flex-start; /* left */
    margin-left: auto; /* right */
}

Recipes

Vertical center

.container {
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
}

Reordering

.container > .top {
    order: 1;
}

.container > .bottom {
    order: 2;
}

Mobile layout

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

.container > .top {
    flex: 0 0 100px;
}

.container > .content {
    flex: 1 0 auto;
}

A fixed-height top bar and a dynamic-height content area.

Vertical

.container {
    align-items: center;
}

Vertically-center all items.

Left and right

.menu > .left {
    align-self: flex-start;
}
.menu > .right {
    align-self: flex-end;
}