You can think of a flex element as a parent container with display:flex. Elements placed inside this container are called items. Each container has a flex-start and flex-end points as shown on this diagram.

Main-axis and Cross-axis

While the list of items is provided in a linear way, Flex requires you to be

mindful of rows and columns. For this reason, it has two coordinate axis. The

horizontal axis is referred to as Main-Axis and the vertical is the Cross-Axis.

To control the behavior of content’s width and gaps between that stretch

horizontally across the Main-Axis you will use justify properties. To control

vertical behavior of items you will use align properties.

If you have 3 columns and 6 items, a second row will be automatically created

by Flex to accommodate for the remaining items.

If you have more than 6 items listed, even more rows will be created.

Flex items equally distributed on the Main-Axis. We’ll take a look at the properties and values to accomplish this in just a moment.

You can determine the number of columns.

How the rows and columns are distributed inside the parent element is determined by CSS Flex properties flex-direction, flex-wrap and a few others that will be demonstrated throughout the rest of this flex tutorial.

Here we have an arbitrary n-number of items positioned within a container. By default, items stretch from left to right. However, the origin point can be reversed.

Direction

It’s possible to set direction of the item’s flow by reversing it.

flex-direction:row-reverse changes direction of the item list flow. The default is row, which means flowing from left to right, as you would expect!

Wrap

flex-wrap:wrap determines how items are wrapped when parent container runs out of space.

Flow

flex-flow is a short hand for flex-direction and flex-wrap

allowing you to specify both of them using just one property name.

flex-flow:row wrap determines flex-direction to be row and

flex-wrap to be wrap.

flex-flow:row wrap-reverse;

flex-flow:row wrap; justify-content: space-between;

flex-flow:row-reverse wrap;

flex-flow:row-reverse wrap-reverse;

flex-flow:row wrap; justify-content: space-between;

The direction can be changed to make the Cross-Axis primary.

When we change flex direction to column, the flex-flow property behaves in

exactly the same way as in previous examples. Except this time, they follow

the vertical direction of a column.

justify-content

I received a lot of requests to clarify the example above. So I created this animation. The original piece from which the diagram was crafted: