1
00:00:00,258 --> 00:00:02,930
Before you begin using
Flexbox in your layouts,

2
00:00:02,930 --> 00:00:06,910
you should understand the terminology and
concepts behind Flexbox.

3
00:00:06,910 --> 00:00:09,160
And I'm gonna be using a lot
of the terminology and

4
00:00:09,160 --> 00:00:12,140
concepts covered in this
video throughout the course.

5
00:00:12,140 --> 00:00:17,810
The two most important elements in Flexbox
layout are Flex containers and Flex items.

6
00:00:17,810 --> 00:00:22,310
The first step to using Flexbox in your
layout is creating a Flex Container.

7
00:00:22,310 --> 00:00:25,520
The Flex container sets the context for
Flexbox layout,

8
00:00:25,520 --> 00:00:29,620
and it contains Flex items, the actual
elements you layout using Flexbox.

9
00:00:30,650 --> 00:00:33,380
A Flex container can be any block-level or

10
00:00:33,380 --> 00:00:37,970
inline element, like a div, ul,
header, even a span element.

11
00:00:37,970 --> 00:00:42,570
Every direct child of a Flex
container is called a Flex item.

12
00:00:42,570 --> 00:00:46,470
And there can be any number of Flex
items inside a Flex container.

13
00:00:46,470 --> 00:00:49,390
For example,
say you had an unordered list.

14
00:00:49,390 --> 00:00:54,630
The ul is a Flex container and
the li elements are the Flex items.

15
00:00:54,630 --> 00:00:56,020
Once the children are Flex items,

16
00:00:56,020 --> 00:00:59,770
you can take advantage of Flexbox's
powerful alignment properties.

17
00:00:59,770 --> 00:01:03,990
The lis can be laid out in any
direction and can have flexible dimensions

18
00:01:03,990 --> 00:01:07,650
that adapt to the available space
inside the ul.

19
00:01:07,650 --> 00:01:09,750
In addition to the Flex container and

20
00:01:09,750 --> 00:01:12,950
Flex items,
to fully understand how Flexbox works,

21
00:01:12,950 --> 00:01:16,870
you need to know about the axis along
which a browser can place Flex items.

22
00:01:18,010 --> 00:01:22,310
Flexbox follows two axis that determine
the layout direction of Flex items.

23
00:01:22,310 --> 00:01:25,460
Items in a container are laid out
following either the main axis or

24
00:01:25,460 --> 00:01:26,950
the cross axis.

25
00:01:26,950 --> 00:01:30,980
So everything in a Flexbox layout
is relative to these two axis.

26
00:01:30,980 --> 00:01:35,330
The main axis is the primary axis
along which Flex items are laid out.

27
00:01:35,330 --> 00:01:39,360
It defines the direction of the Flex
items in the Flex container.

28
00:01:39,360 --> 00:01:43,220
And the cross axis runs
perpendicular to the main axis.

29
00:01:43,220 --> 00:01:46,790
Each axis has a start side and
an end side.

30
00:01:46,790 --> 00:01:51,040
The default main start and
main end direction of the main axis is

31
00:01:51,040 --> 00:01:55,580
left to right and the default direction
of the cross access is top to bottom.

32
00:01:55,580 --> 00:01:58,200
But you can easily change the directions.

33
00:01:58,200 --> 00:02:00,740
For example, you can switch a horizontal

34
00:02:00,740 --> 00:02:05,850
column layout along the main access to a
vertical layout using Flexbox properties.

35
00:02:05,850 --> 00:02:09,450
This will start to make more sense in
the next section of this course when we

36
00:02:09,450 --> 00:02:12,670
dive into the properties
that make Flexbox work.

37
00:02:12,670 --> 00:02:17,470
Also be sure to check out this awesome
guide to Flexbox on CSS tricks, along with

38
00:02:17,470 --> 00:02:20,590
other helpful resources I've posted
in the teacher's notes of this video.