Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Before you begin using flexbox in your layouts, you should understand the terminology and concepts behind flexbox.
Resources
- A Complete Guide to Flexbox
- A Visual Guide to CSS3 Flexbox Properties
- Flexbox Playground
- Flexbox - latest browser support
Video review
- The two most important elements in flexbox layout are flex containers and flex items.
- The flex container sets the context for flexbox layout; it contains flex items, the actual elements you layout using flexbox.
- Every direct child of a flex container is called a flex item; there can be any number of flex items inside a flex container.
- Once the children are flex items, you can take advantage of flexbox's powerful alignment properties.
- Flexbox follows two axes that determine the layout direction of flex items: main axis and cross axis.
- The main axis is the primary axis along which flex items are laid out; it defines the direction of flex items in the flex container.
- 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.
- The the default direction of the cross axis is top-to-bottom.
Related videos
-
0:00
Before you begin using Flexbox in your layouts,
-
0:02
you should understand the terminology and concepts behind Flexbox.
-
0:06
And I'm gonna be using a lot of the terminology and
-
0:09
concepts covered in this video throughout the course.
-
0:12
The two most important elements in Flexbox layout are Flex containers and Flex items.
-
0:17
The first step to using Flexbox in your layout is creating a Flex Container.
-
0:22
The Flex container sets the context for Flexbox layout,
-
0:25
and it contains Flex items, the actual elements you layout using Flexbox.
-
0:30
A Flex container can be any block-level or
-
0:33
inline element, like a div, ul, header, even a span element.
-
0:37
Every direct child of a Flex container is called a Flex item.
-
0:42
And there can be any number of Flex items inside a Flex container.
-
0:46
For example, say you had an unordered list.
-
0:49
The ul is a Flex container and the li elements are the Flex items.
-
0:54
Once the children are Flex items,
-
0:56
you can take advantage of Flexbox's powerful alignment properties.
-
0:59
The lis can be laid out in any direction and can have flexible dimensions
-
1:03
that adapt to the available space inside the ul.
-
1:07
In addition to the Flex container and
-
1:09
Flex items, to fully understand how Flexbox works,
-
1:12
you need to know about the axis along which a browser can place Flex items.
-
1:18
Flexbox follows two axis that determine the layout direction of Flex items.
-
1:22
Items in a container are laid out following either the main axis or
-
1:25
the cross axis.
-
1:26
So everything in a Flexbox layout is relative to these two axis.
-
1:30
The main axis is the primary axis along which Flex items are laid out.
-
1:35
It defines the direction of the Flex items in the Flex container.
-
1:39
And the cross axis runs perpendicular to the main axis.
-
1:43
Each axis has a start side and an end side.
-
1:46
The default main start and main end direction of the main axis is
-
1:51
left to right and the default direction of the cross access is top to bottom.
-
1:55
But you can easily change the directions.
-
1:58
For example, you can switch a horizontal
-
2:00
column layout along the main access to a vertical layout using Flexbox properties.
-
2:05
This will start to make more sense in the next section of this course when we
-
2:09
dive into the properties that make Flexbox work.
-
2:12
Also be sure to check out this awesome guide to Flexbox on CSS tricks, along with
-
2:17
other helpful resources I've posted in the teachers notes of this video.
You need to sign up for Treehouse in order to download course files.
Sign up