Before you begin using Flexbox in your layouts,

you should understand the terminology and concepts behind Flexbox.

And I'm gonna be using a lot of the terminology and

concepts covered in this video throughout the course.

The two most important elements in Flexbox layout are Flex containers and Flex items.

The first step to using Flexbox in your layout is creating a Flex Container.

The Flex container sets the context for Flexbox layout,

and it contains Flex items, the actual elements you layout using Flexbox.

A Flex container can be any block-level or

inline element, like a div, ul, header, even a span element.

Every direct child of a Flex container is called a Flex item.

And there can be any number of Flex items inside a Flex container.

For example, say you had an unordered list.

The ul is a Flex container and the li elements are the Flex items.

Once the children are Flex items,

you can take advantage of Flexbox's powerful alignment properties.

The lis can be laid out in any direction and can have flexible dimensions

that adapt to the available space inside the ul.

In addition to the Flex container and

Flex items, to fully understand how Flexbox works,

you need to know about the axis along which a browser can place Flex items.

Flexbox follows two axis that determine the layout direction of Flex items.

Items in a container are laid out following either the main axis or

the cross axis.

So everything in a Flexbox layout is relative to these two axis.

The main axis is the primary axis along which Flex items are laid out.

It defines the direction of the Flex items in the Flex container.

And the cross axis runs perpendicular to the main axis.

Each axis has a start side and an end side.

The default main start and main end direction of the main axis is

left to right and the default direction of the cross access is top to bottom.

But you can easily change the directions.

For example, you can switch a horizontal

column layout along the main access to a vertical layout using Flexbox properties.

This will start to make more sense in the next section of this course when we

dive into the properties that make Flexbox work.

Also be sure to check out this awesome guide to Flexbox on CSS tricks, along with

other helpful resources I've posted in the teachers notes of this video.