Introduction

flexbox is a powerful layout mode made to be responsive for many screen sizes and displays. It allows for incredibly easy layouts, with little code and easy centering of content. Use flexbox when positioning content along a single direction and CSS grid for full 2-D layout.

Currently, flexbox has great support in evergreen browsers but has bugs in IE 11: https://caniuse.com/#search=flexbox

Playground

In this playground, the main container decreases and increases size to demonstrate the responsive design behavior of flexbox. As the screen gets smaller, items that cannot fit on the current row simply move onto the next line. This is done with the CSS property flex-wrap which is explained below.

To use flexbox, you must first set an element to display in flex: display: flex;. This will set every direct child of that element to be a flex item. In this playground, we set the .container class to display flex which affects every direct child element (elements with the class .child).

Container Display

.container { display: flex; }

Parent Properties

These are properties that can be used on the parent container to modify the behavior of all of its flex items. In this tutorial, the .container class will be the parent container (flex container) that contains all the other elements.

We can use a helpful graphic from the Mozilla Web Documentation to describe how flexbox works.

flex-direction

Flex items flow in the direction of the main axis. The main axis direction can be set with the css property flex-direction. By default, flex-direction is set to row which forces the main axis and its flex items to move from left to right.

Container Flex Direction

.container { flex-direction: initial; }

flex-wrap

How do we make this responsive? We can use the css property flex-wrap to determine how flexbox interacts with overflowing content. By default, flex-wrap is set to nowrap which tries to place all of its flex items on a single line. With the wrap value, flex items automatically move to the next line when they cannot fit on the current line.

Container Flex Wrap

.container { flex-wrap: initial; }

justify-content

The css property justify-content changes the alignment of the flex items along the main axis. This allows you to do things like add spacing around or between flex items. For example, a value of center will try to position the flex items to the center of the main axis.

Container Justify Content

.container { justify-content: initial; }

align-items

In contrast, the cross axis is always perpendicular to the main axis. With a flex-direction of row, the cross axis is aligned vertically. With a flex-direction of column, the cross axis is aligned horizontally.

With the align-items css property, we can position the flex items along the cross axis.

Container Align Items

.container { align-items: initial; }

align-content

align-content positions a flex items lines when there is extra space in the cross axis. For example, if you had a flex container with flex-direction: row and flex-wrap: wrap, and there were several wrapping lines, align-content will determine the spacing between each wrapped line.

Container Align Content

.container { align-content: initial; }

Child Properties

While the css properties shown above affect all of the children of a flex container, these next properties are able to individually affect a single flex item. In this section, the css controls are focused on the first-child, second-child, and third-child classes which are set to the first three flex items of the container class.

order

By default, flex items are placed in the same order as they are declared. With the css property order, the order can be specifically set. Elements with a higher order value will be placed last.

Child Order

.red-child { order: 0; } .green-child { order: 0; } .yellow-child { order: 0; }

flex-grow

flex-grow determines whether a flex item will expand when there is free space within the flex container. If all the flex items within a flex container have a flex-grow of 1, all the items will take up the same space. If one of the flex items have a flex-grow of 2, it will try to take up twice as much space as the other flex items.

Child Flex Grow

.red-child { flex-grow: 0; } .green-child { flex-grow: 0; } .yellow-child { flex-grow: 0; }

flex-shrink

flex-shrink determines if a flex item can shrink.

Child Flex Shrink

.red-child { flex-shrink: 0; } .green-child { flex-shrink: 0; } .yellow-child { flex-shrink: 0; }

flex

flex is a quick and concise way of setting the css properties flex-grow, flex-shrink and flex-basis all in the same line. The values are set in the following order: (flex-grow) (flex-shrink) (flex-basis).

Child Flex

.red-child { flex: 0 0 0%; } .green-child { flex: 0 0 0%; } .yellow-child { flex: 0 0 0%; }

align-self

The align-items css property is used by the flex container to align its flex items along the cross axis. In contrast, the align-self property is used to individually set a single flex items alignment on the cross axis.

Child Align Self

.red-child { align-self: initial; } .green-child { align-self: initial; } .yellow-child { align-self: initial; }

Conclusion

Flexbox is an incredibly powerful CSS layout tool that’s standardized across browsers. I recommend that you play around with it when you have some free time. If this helped you out, feel free to share it with others who are learning CSS.

I also recommend that you check out the MDN (Mozilla Developer Network) on Flexbox and this fantastic flexbox guide from CSS Tricks.