CSS Flexbox allows you to easily format your HTML like you never knew was possible. With Flexbox you can align vertically and horizontally, easily. Like the sound of that? Yeah, so do I.

Flexbox is also super useful when you're creating the general layout of your website or app. It is easy to learn, well-supported (in all modern browsers) and is great to work with – not to mention it doesn’t take long to get the basics.

So let's dive right in and learn more.


Here is a list of the Flexbox properties that can be used to position elements in CSS:

CSS that can be applied to a container

display: flexbox | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS that can be applied to items/elements in a container

order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

So now you have your toolkit. But you might ask “What do I do with my tools, and how do I use them?” Well, let me show you.

Display Flex

display: flex; just tells your browser, "hey I would like to use Flexbox with this container, please." This will initialize this box as a Flex container and apply some default Flex properties.

This is what our container looks like without display: flex;:

CSS playground no flex properties

After adding display: flex; we get the below – you can see that the default Flex properties are applied causing it to look like this:

CSS playground display flex default style

Flex Direction

flex-direction: allows us to control how the items in the container are displayed. Do you want them left to right, right to left, top to bottom or bottom to top? You can do all this easily by setting the Flex direction of the container.

Flexbox applies rows as the default for the direction. Here is what they all look like:

flex-direction: row;

flex-direction: row; example

flex-direction: row-reverse;

flex-direction: row-reverse example

flex-direction: column;

flex-direction: column example

flex-direction: column-reverse;

flex-direction: column-reverse example

Flex Wrap

Flexbox by default will try to fit all elements into one row. But you can change this with the flex-wrap property. This allows you to choose whether the elements will spill over or not.

There are 3 properties for flex-wrap::

flex-wrap: nowrap is the default and will try to fit everything in one row from left to right.

flex-wrap: wrap allows items to go on to create multiple rows from left to right.

flex-wrap: wrap-reverse allows items to be on multiple rows but displays right to left this time.

Flex Flow

Flex flow combines the use of flex-wrap and flex-direction into one property. It is used by first setting the direction and then the wrap.

flex-flow: column wrap; is an example if how to use this.

Justify Content

justify-content is a property that aligns items in the container along the main axis (this changes depending on how content is displayed).

There are multiple options for this. It allows us to fill any empty space in rows but lets us define how we want to ‘justify’ it.

Here are our options when we justify our content: flex-start | flex-end | center | space-between | space-around;.

Align Items

Align items allows us to align items along the cross-axis. This allows content to be positioned in many different ways using justify content and aligns items together.

align-items: flex-start | flex-end | center | baseline | stretch;

Align Content

This is for aligning items with multiple lines. It is for aligning on the cross-axis and will have no effect on content that is one line.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Other resources on Flexbox and Grid

Articles and courses

The Ultimate CSS Flex Cheatsheet

Full CSS Video Course (Includes Flexbox and Grid)

A Visual Guide to CSS Flexbox

How to Create an Image Gallery with CSS Grid

Games and Apps

Flexbox Defense is a web game that teaches flexbox the fun way.

Flexbox Froggy is also a web game that teaches flexbox the fun way.

Flexbox in 5 is a web app that allows you to be able to see how flexbox works with a few simple controls.

Flexyboxes is an app that allows you to see code samples and change parameters to see how flexbox works visually.

Flexbox Patters is a website that shows off loads of flexbox examples.


Flexbox Essentials

Flexbox Practical Examples

What The Flexbox?!