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