Complete Flexbox Course

Learn about what Flexbox is and what you can do with this new CSS box model to make your job easier and work more productively.

Flexbox is supported by 97.5% of users worldwide (Feb 2017, caniuse.com) with prefixing. Only IE 10 and below, and old Android browsers are not supported.

Thus, you can now finally start using Flexbox for most audiences to use very concise and beautiful solutions for tasks that have been unnecessarily complicated before.

Prefixing can be done using intelligent code editors, online tools, or build tools.

There is no setup required to use Flexbox, it's part of the CSS 3 standard and not a framework or library. Of course you should have a code editor that knows Flexbox and can offer autocomplete etc., such as Sublime Text, Atom or an IDE.

Flexbox uses the concepts of main axis and cross axis. If the flex container is defined as a row, the main axis will be horizontal and the cross axis thus vertical. If the container is a column layout (defined via flex-direction later), it's the other way around.

The cross axis is always perpendicular to the main axis.

It's important to understand this concept to know what the effect the Flexbox properties will have later on in this course.

This is your chance to test your knowledge of this section!

In Flexbox, you can define the flex container to have a row or column layout using either flex-direction: row or flex-direction: column.

Also, if you want the flex container to be filled from the end of the main axis (e.g. from the right in a row), you can add reverse to the values: flex-direction: row-reverse or flex-direction: column-reverse.

Valid values are:

• flex-direction: row; (default)
• flex-direction: column;
• flex-direction: row-reverse;
• flex-direction: column-reverse;

Let's see if you can recall the most important info about flex-direction.

With justify-content, you can specify how flex items will align along the main axis and what spacing they'll have.

Valid values are:

• justify-content: flex-start;
• justify-content: flex-end;
• justify-content: center;
• justify-content: space-around;
• justify-content: space-between;

Try recalling what's essential about justify-content.

With align-items, flex items can be aligned along the cross axis. For example, align them at the top or bottom (of a row).

Valid values are:

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

Test your knowledge of the align-items property!

To create multiple rows or columns, you can enable flex-wrap by using either wrap or wrap-reverse as the default, in contrast to the default value nowrap.

This way, flex items will flow into the next or column once it would overflow. With flex-wrap: nowrap, it may well happen that your flex container will overflow.

Valid values are:

• flex-wrap: nowrap; (default)
• flex-wrap: wrap;
• flex-wrap: wrap-reverse;

Test what you just learned about flex-wrap!

Once you have multiple rows or columns, you will probably want to control the alignment and spacing of these rows/columns. This is exactly what align-content is for, which is essentially the same as justify-content but for the cross axis. Thus, align-content only makes sense once you have more than one row or column.

Valid values are (same as justify-content):

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

Check your knowledge about align-content!

With order, you can change the order of your flex items independent of their actual order in the HTML markup. This allows for more dynamic layouts without relying heavily on JavaScript.

The default value for order is 0, thus you have to use a negative number to move an item to the front.

Valid values are:

• All positive numbers, negative numbers, and zero.

In Flexbox, align-self allows you to override whatever basic layout you set via justify-content. Normally, you would of course do this only for specific flex items which should not follow the parent layout.

Valid values are:

• same as justify-content

By default, flex items will not take up remaining space in their parent. With Flexbox, you can simply set flex-grow to 1 or above to allow a flex-item to fill remaining space.

If multiple flex items have flex-grow set to >0, the remaining space will be split up between them depending on their flex-grow number - the higher the number is, the more they will expand. For details about the calculation, check the video.

Valid values are:

• 0 (default)
• positive numbers

Check your knowledge on the flex-grow property, this one is essential!

If the flex container cannot contain all its items with their specified size, the flex items will by default be allowed to shrink in order to fit. However, Flexbox will only shrink items to some degree (depending on their content and padding) so the flex container may still overflow.

You can disable shrinking for flex items by setting flex-shrink to 0. Similarly, larger values for flex-shrink will make it shrink more compared to other items.

Valid values are:

• 1 (default)
• 0 (forbid shrinking)
• all positive numbers

Test what you learned about flex-shrink in this quiz!

In Flexbox, flex items will only adhere to width and height properties if there is no value for flex-basis specified. However, the best practice is to use flex-basis which will refer to width in row containers and to height in column containers.

When calculating the size of each flex item, the flex-basis value will be evaluated first. Only after that, flex-grow and flex-shrink will be used to divide up remaining (or overflowing) space.

Valid values are:

• Any px, em, rem, % values (like you would to for width/height)

Congrats for making it here.

Check what you learned about flex-basis, the last property of the Flexbox box model.

This first solution for Flexbox grids uses minimal markup and CSS code but is already powerful enough for a majority of use cases.

Each grid row will be in its own container, with all elements spanning the same size inside the container via flex: 1. You can use this for teasers showing advantages of your product, review blocks or any other simple multi-column module.

In this solution, you'll create more flexible grids with Flexbox which use flex-wrap to create galleries with multiple rows in one flex container. Also, via classes with different flex-basis values, you'll be able to define how much space each flex item should take up.

This solution is for more advanced galleries where the items in one row should not necessarily be of the same size.

Ever tried vertical-align: middle to no avail? Well, it only works for inline elements and table cells. Finally, with Flexbox you can center any element with just one or two lines of code. This is one of the things that should have been possible in CSS right from the beginning.

Using a flex container and align-items: center, you're now able to vertically center any element inside a flex container. This tutorial shows you two different use cases for this.

A media object is a module with a picture and some content, possibly nested. Think comment sections on a blog. It's a highly useful and reusable module made popular by the OOCSS approach (object-oriented CSS).

Here, you'll learn to easily create flexible media objects using Flexbox which are highly maintainable and fulfill more requirements than described above. In the video, we'll discuss all we want the media object to be able to do.

The Holy Grail Layout is essentially a 3-column layout with a header and a sticky footer where all columns should have equal height at all times, the footer should be sticky, and the HTML markup for the content should come before the markup for both sidebars.

Implementing this layout with CSS was only possible with some kind of compromise before. With Flexbox, you're finally able to use a Holy Grail Layout. In this lecture, I'll show you how.

All properties of Flexbox in one PDF overview.

This is essentially a PDF version of the showcase, so you can always look at this interactively and even modify it using the showcase code.

All you've learned in this course!

Let me know if you have any suggestions for another example of Flexbox in practice :)

Check out other web design & development courses of mine for $10.