Unless we've changed something (like using float or display: inline-block;), block-level elements, like DIVs, will flow naturally into the appearance of a column. Why?

Because that's the natural flow of an HTML document for block-level elements.

By default, a flex container will adjust the flow of its content as a row. It's main-axis is "row".

The elements immediately inside (direct-descendant) a flex container are called, "flex items."

The justify-content property is responsible for spacing things out along the current main-axis (which is row, by default).

Setting justify-content on a flex container to flex-end will move its items to the end of the main-axis – in this case, to the end of the row.

Setting justify-content on a flex container to center will keep its items always in the center of the main-axis.

Setting justify-content on a flex container to space-between will distribute any extra space in the main-axis between the items equally.

No space will be distributed to the start or the end of the main-axis.

Setting justify-content on a flex container to space-evenly will distribute any extra space in the main-axis between the items equally, just like space-between.

However, it will also distribute an equal amount to the start and the end of the axis. You'll get space on the ends – not just in-between.

The align-items and justify-content properties are identical to each other – with one important distinction: whereas justify-content distributes items along the main-axis, align-items distributes items along the cross-axis.

If the main-axis is row, then align-items will distribute things along columns.

So, setting align-items to flex-end will move the items each to the end of their respective columns – the bottom.

Since the align-items property speaks in "columns" (by default), setting its value to center will center the container's items vertically.

And all the people rejoiced.

Now, we're going to combine some tricks. We can use justify-content and align-items together to distribute flex items along both the row and column axes.

And again all the people rejoiced.

Let's set justify-content to space-around and align-items to center.

(space-around is just like space-evenly, except it only distributes half the usual portion to the ends of the axis. But the items still get evenly spaced out amongst themselves.)

Now, let's start toying with main-axis. This we can do by changing the flex-direction to something other than the default of row.

One option we have is to use row-reverse to change the starting position of the row to its opposite. The effect will appear as though we're looking at the row in a mirror.

The items themselves should remain in the order in which we wrote them, relative to the axis – not necessarily to our eyes.

So item-1 will now start on the right-hand side of the row, item-2 will follow, etc.

Now, we get to something we've been expecting: we can change the main-axis from row to column.

Initially, you'll notice this appears identical to the way these boxes display in Example 1 – where the container had not yet been set to display: flex;.

BUT despite the initial visual similarity right now, we also have the flexibility of Flexbox to work with.

Just remember: when we change the flex-direction, we change the axis, and when we change the axis, the meanings of justify-content (for main-axis alignment) and align-items (for cross-axis alignment) change.

Let's combine together the three properties we've covered: justify-content, align-items, and flex-direction.

Let's observe what happens when we set:

• flex-direction to column
• justify-content to space-between
• align-items to flex-end

Break down what each is doing, in order.

Also, bear in mind that, if you are going to change the main-axis using flex-direction, it is far easier to do that before setting any other flex property – because everything is based on the main-axis.

flex-basis can be thought of as an ideal and flow-safe width for a flex item. It is designed to avoid breaking the layout – something width will often do. It takes priority over width.

If you provide a flex-basis value other than auto, you are saying to the browser,

Listen, I want this size ideally, but I am willing for it to shrink as much as min-width and grow as much as max-width. Just get as close as you can to the size I want, without breaking the layout.

If you switch the flex container's flex-direction to column or column-reverse, flex-basis will manage the item's height, instead of its width.

flex-grow determines how much of the available space this flex item can grow to take up.

If you provide a flex-grow value other than 0, you are saying to the browser,

Listen, if there is some extra space remaining, I want this flex item to eat up some of it. The more this flex item eats, compared to other flex items in the container, the bigger it can grow.

SCENARIO – If the first item has a flex-grow: 3;, and the second item has a flex-grow: 1;, then the first item will consume 3 portions of the extra space, and the second item will consume 1 portion of that extra space. If the third item has been given no flex-grow value, it will default to 0 portions of the extra space.