An interactive guide to Flexbox

Flexbox is a CSS layout module. It is frequently used to arrange things in a single dimension, such as a list or row. Coupled with CSS Grid, they are indispensable tools for building websites.

Flex Container

To start, you need a flex container, which is the parent element of multiple flex items. Any html element can be a flex container by setting display: flex or display: inline-flex.

By adding the display property, a flex layout is established. This is different from the normal block layout, so margin collapse and properties like vertical-align and float stop working.

.parent {
    display: block;
}
.child {
    margin: 1rem;
    outline-offset: 1rem;
    outline: 2px dotted #dcb386;
}

Ordering & Orientation

The direction in which items are laid out depends on the main axis. You can switch the orientation of the axis by adding flex-direction: column to the container. The main axis direction follows the writing mode direction. Similarly, you can also switch the direction with flex-direction: row-reverse or flex-direction: column-reverse.

.parent {
    direction: ltr;
    display: flex;
    flex-direction: row;
}

All items will try to fit within a single line unless flex-wrap: wrap is added, allowing items to wrap to additional lines if needed.

.parent {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

Alignment

For alignment, there are 3 properties and they are easily mixed up.

• justify-content: changes alignment in the main axis
• align-items: changes alignment in the cross axis
• align-content: changes alignment when items are wrapped and there is extra space in the cross axis

.parent {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

Flex Item

Setting properties on the flex container affects all items in the container but there are times when we only want to change individual item’s alignment or size.

Alignment

The align-self property allows one to override the container’s align-items alignment.

We can change the ordering of individual items via the order property. This is especially useful when we want something to come first in the HTML but placed differently visually.

.parent {
    display: flex;
    align-items: flex-start;
}

.child {
    align-self: flex-start;
    order: 0;
}

Size

The flex property is a shorthand for flex-grow, flex-shrink and flex-basis, which all affect what size an item takes on in the main axis.

flex-basis is a confusing property because it can take on many values:

• auto (default): distributes the extra space based on the flex-grow property
• 0: extra space is not distributed, items take on size dictated by the flex-grow property
• length such as 5rem, 20%: default length before extra space is distributed

Furthermore, when flex-basis is auto, depending on the flex-direction, width or length can override the value. When flex-basis is not auto, depending on the flex-direction, it overrides width or length instead.

.parent {
    display: flex;
}

.first-child {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.second-child {
    flex: 0 1 auto;
}

Mastering Flexbox

That is all the CSS properties that make up the Flexbox layout module. Mastering Flexbox takes time and practice. Try out the interactive Flexbox playground and experimenting with the various combinations!