CSS Flex (also known as Flexbox) is CSS's layout rendering ruleset that consists of parent container and child elements or its items. This tutorial will explore how its properties work and then we'll create some flex layouts.

Flex is a two-fold construct. Some Flexbox properties are intended to be applied to parent and won't work on item elements. Other properties only work on items. Make sure you understand this before moving forward.

It's not uncommon to make the mistake of applying flex properties to its items that are meant to be applied to its parent container. We'll draw distinction between the two in this tutorial.

For now, let's start from the beginning.

If you have a div element that you want to behave like flex:

<div id = "parent"></div>

You can start by defining the parent container for your flex block:

div#parent {
    display: flex;
}

Applying this style to any HTML tag will convert it into an element with flex capabilities.

Many HTML elements have display property set to either inline or block. So there is another thing. Sometimes you will want your flex container to be inline too.

Inline flex containers are set with inline-flex value:

div#parent {
    display: inline-flex;
}

Next step is to decide how many flex items you need and insert them as follows:

<div id = "parent">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
</div>

That's enough to get started. Now all you need to do is learn how flex properties work.

How you want your layout to adapt to its content is determined by flex properties. The same goes for aligning items relative to other items in the set.

Let's take a look at Flex properties next.

Learn CSS Flex by playing this CSS Flexbox Train Station game!

Park your flex train at provided ghost train station. Each train car must perfectly match position of the ghost train. You can accomplish this by changing flex properties and values in source code window below.

Details matter. Pay close attention to direction of each car in every challenge.

How To Play. To pass this challenhallenge align your train with the ghost train by changing flex properties. They will be applied to the parent container to align flex ege align your train with the ghost train by changing flex properties. They will be applied to the parent container to align flex elements represented by train cars. Click Park Button to test your code when you're ready.

Flex Challenge 1 (see all flex challenges here)

Flex Container Code

Fun fact. The wheels inside each flex element are also flex elements.

Unlike regular HTML elements CSS flexbox (flexible box) container has two axis called Main-Axis and Cross-Axis.

Here's the same set of items 1, 2 and 3 with 4 possible flex-direction values.

Axes cannot be combined. Only one axis can be used at a time.This is only an example.

Flex is inherently not a grid. It has one continuous lane of content which can flow in one direction at a time (in the direction of rows or columns on one axis at a time.) Items inside a flexbox container can break into multiple rows and even create grid-like layouts, but not when using its default settings.

There is only one active flow of direction that all items follow. It's either horizontal on main-axis (default behavior) or vertical on cross-axis. You can swap axis by changing flex-direction property.

By default, inner content overflows parent container without breaking to next row (but still remains visible on the screen.) This is when the sum width of all items don't fit width of the parent container.

Items can skip to next line, but you'll need to set flex-wrap to wrap if you need to create a grid-like layout using flex. Or if you simply need to create a multiple row layout with varying item dimension. You're going to learn special tricks for getting your flex grid behave just the way you want it to.

By default Flex decides when next item of your content should break to next row. But there are properties you can tweak to create a perfect grid-like layout.

One of first things you want to learn about flex is how to center items inside a flexbox div element both vertically or horizontally. Before going into more advanced examples, here's illustration of centering an item:

Just set display: flex, justify-content: center and align-items: center to parent container. Other than that you might also want to explicitly set width and height of the item. Generally flex will calculate spacing based on content's actual (calculated) width and height.

This will center inner text as well as any div elements. Moreover, this setup will also center the row of all items when there are multiple items present in your parent container. (As you'll see in the following examples.)

This one trick is enough for building many minor designs like CSS buttons, centering progress bars, or simply centering an image inside an HTML element.

And while centering items is important, there is so much more to making layouts with flex.

Simple Flex item

In this tutorial we're going to use this item specimen for all simple examples.

The first item is important. By default it's placed at flex-start. But its placement can be changed in reverse by flex-end.

Flex items don't automatically adapt to container size. So let's assign some values to make a basic box:

.item {
    font-size: 28px;
    font-weight: bold;
    border-radius: 8px;
    min-width: 100px;
    line-height: 125px;
    text-align: center;
    background-color: var(--flex-item-bg);
}

When making your own flex layout make sure to define some basic dimensions for your default items. Flex items can stretch and change size depending on content.

Default settings

Example of default flex settings with multiple items:

Now that we have multiple items it gets more interesting.

Generally you should decide whether you need a row or column-based layout first and go from there. Left to right is the default, which at first seems to behave similar to inline or inline-block content.

The direction in which items are going to flow is determined by flex-direction property where row is the default value (this means by default items will flow from left to right on Main axis.) Whereas setting flex-direction to column will swap the axis and items will flow from top to bottom.

Let's take a look at flex-direction values

row → (default)

Items flow from left to right with direction: row (default).

Flex feature set also offers a number of "reverse" verions of some of its properties.

row-reverse ←

Items flow in opposite direction or in reverse order with flex-direction: row-reverse

flex-direction: column-reverse ↑

Items flow upward from bottom to top with flex-direction: column-reverse.

This is the opposite of previous example.

Controlling Space Between Items

Spacing between items on Main Axis and Cross Axis is controlled by a set of values assigned to align-content and justify-content properties. They will be described next in this flex tutorial.

An example of spacing content based on flex direction would be justify-content property which determines amount of either vertical or horizontal space between items. But which one is it? Item flow direction depends on what's in your flex-direction property, as seen from the two examples above.

This will start to make more sense as we move forward.

Insert flex-flow content here

Can we make a CSS flex chessboard? Sure why not? The standard UTF-8 set offers us an image for every single chess piece. We've already looked at how to align content to center in both dimensions. The same strategy can be used here. This isn't a perfect solution, some values had to be tweaked manually.

The flex chessboard parent container:

#flex-chessboard-example {
    width: 100%;
    height: auto;
    justify-content: stretch;
    align-content: stretch;
    height: auto;
    margin: auto;
    flex-wrap: wrap;
    flex-flow: row wrap;
    padding: 50px;
    background-color: #5a3434 !important;
}

Chessboard square:

.chess-box {
    min-width: 109px;
    font-size: 58px !important;
    margin: 0;
    padding:0;
    font-weight: normal;
    justify-content: center;
    item-align: center;
    margin: 0px;
    border-radius:0;
}

The box-shadow property was used to create subtle shadow for each square on the chessboard.

Regular (white) chessboard square:

.chess-box {
    background: white;
    box-shadow: inset 8px 8px 10px #d0d0d0, inset -3px -3px 10px #a9a9a9 !important;
}

Black background square:

.b {
    background: #222 !important;
    box-shadow: inset 8px 8px 10px #111111, inset -3px -3px 10px #636363 !important;
}

1. Introduction for beginners
2. Layout Anatomy - Main Axis and Cross Axis
3. Direction and orientation
4. Flexbox properties
5. Align and Justify
6. Practical layout examples
7. Terminology