Flex Layout

Introduction

Flex is a one-dimensional layout model, which provide powerful capabilities for content justifying and alignment. There are two axes in flex: main axis and cross axis. It’s called one-dimensional because flex always deals with layout in one dimension. Flex layout provides flexible controls on layouts, which is completely out of box compared to traditional box model.

Core Concept

The two axes of flex

Main axis and cross axis are the core concepts in flex. The main axis is the direction that content should extend, which is defined by flex-direction property. Then the cross axis is exactly perpendicular to the main axis.

Flex container and flex items

Flex container is the element using the flex layout, which is defined with display: flex or display: inline-flex. As we set flex container, its direct children become flex items. When setting flex container and flex items, they will behave as the following:

• Items display in a row (the flex-direction property is row by default).
• The items start from the start edge of the main axis.
• The items do not stretch on the main axis, but can shrink.
• The items will stretch to fill the size of the cross axis.
• The items’ flex-basis property is set to auto.
• The container’s flex-wrap is set to nowrap. If the items overflow the container, the overflowed content will be hidden. Otherwise, more items could be fit into the container.

When flex-wrap is set to wrap, flex items will be wrapped into multiple lines when they are overflowed. Each line should be considered to be a flex container. Space distribution works the same way as in one line for each container.

flex-direction and flex-wrap

flex-direction controls the direction of flex items on the main axis. flex-wrap controls whether flex items are wrapped into multiple lines when they overflow.

flex-basis, flex-grow and flex-shrink

These three properties are to determined flex container’s distribution of available space for flex items. flex-basis controls the width of the flex item, which it’s set to auto by default. flex-grow causes the flex item grow along the main axis if set to a positive integer. flex-grow will not make the flex item’s width greater than max-width if it’s set. flex-shrink works opposite to flex-grow, in the way that when flex container doesn’t have enough space for flex items, items with flex-shrink set to a positive integer will shrink its width to fit the container. But the width of the flex item will not smaller than min-content and min-width if the min-width is set. flex property is a shorthand for flex-grow flex-shrink flex-basis, which default value is initial, equal to 0 1 auto.

justify-content and align-items

justify-content is used to distribute the space between flex items on main axis. align-items will align flex items on the cross axis.

References

Flexbox guide on MDN
Flexbox guide on css-tricks