A Visual Guide to CSS3 Flexbox Properties

The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

Many designers and developers find this flexbox layout easier to use, as positioning of the elements is simpler thus more complex layouts can be achieved with less code, leading to simpler development process. Flexbox layout algorithm is direction based unlike the block or inline layout which are vertically and horizontally based. This flexbox layout should be used for small application components, while new CSS Grid Layout Module is emerging to handle the large scale layouts.

Rather that explaining how the flex properties work, this guide will focus on how the flex properties affect the layout in a visual way.

Before we start with describing the flexbox properties, let’s give a little introduction of the flexbox model. The flex layout is constituted of parent container referred as flex container and its immediate children which are called flex items.

In the box above you can see the properties and the terminology used to describe the flex container and its children. For more information on their meaning read the official flexbox model by W3C.

The flexbox layout went through many iterations and several syntax changes from its initial draft in 2009, so to avoid confusion and make everything clear we’ll use only the syntax from the last working draft (Sep 2014). If you need to maintain old browser compatibility you can read this article on how to do that in the best way.

Note: This is the only property you need to set on the parent container and all its immediate children will become automatically flex items.

There are several ways to group the flexbox properties and by far the easiest way I’ve found to understand the flexbox options and their usage is to divide them in two groups one for the flex container and one for the flex items. Below are explained all of them and how they affect the layout visually.

This property specifies how flex items are laid out in the flex container, by setting the direction of the flex container’s main axis. They can be laid out in two main directions, like rows horizontally or like columns vertically.

The initial flexbox concept is the container to set its items in one single line. The flex-wrap property controls if the flex container lay out its items in single or multiple lines, and the direction the new lines are stacked in.

The justify-content property aligns flex items along the main axis of the current line of the flex container. It helps distribute left free space when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. This property sets the default alignment for all flex items, including the anonymous ones.

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

The flex-shrink specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.

Values:

.flex-item{-webkit-flex-shrink:; /_ Safari _/
flex-shrink:;}

By default all flex items can be shrunk, but if we set it to 0 _(don't shrink_)_ they will maintain the original size_

This align-self property allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. Refer to align-items explanation for flex container to understand the available values.

Dimitar is regular guy passionate about helping others, that's why he built Invoicebus, a service for designers and developers where they can create and track their invoices and payments in a beautiful and simple manner.

Dimitar is regular guy passionate about helping others, that's why he built Invoicebus, a service for designers and developers where they can create and track their invoices and payments in a beautiful and simple manner.