WEBVTT

1
00:00:00.005 --> 00:00:04.001
- Flexbox is shorthand for flexible box.

2
00:00:04.001 --> 00:00:06.004
It's a layout module for CSS that gives you

3
00:00:06.004 --> 00:00:08.009
an efficient way to arrange, organize

4
00:00:08.009 --> 00:00:13.000
and size website elements to create responsive designs.

5
00:00:13.000 --> 00:00:15.003
Front end web developers have embraced Flexbox

6
00:00:15.003 --> 00:00:18.005
for web-based layouts because it lets us arrange items

7
00:00:18.005 --> 00:00:21.004
within a parent container, and then get pretty specific

8
00:00:21.004 --> 00:00:23.007
about how we want those items to behave

9
00:00:23.007 --> 00:00:26.001
in relationship to one another.

10
00:00:26.001 --> 00:00:29.000
The way Flexbox works is pretty straightforward.

11
00:00:29.000 --> 00:00:32.000
You have a container it's called the flex container

12
00:00:32.000 --> 00:00:35.009
or parent then you have the elements within the container

13
00:00:35.009 --> 00:00:39.009
and these are referred to as flex items or children.

14
00:00:39.009 --> 00:00:43.000
The flex items are placed along flex lines

15
00:00:43.000 --> 00:00:47.002
which are either a vertical or horizontal access.

16
00:00:47.002 --> 00:00:50.007
These items can be manipulated in layout, size,

17
00:00:50.007 --> 00:00:54.009
spacing and even change order along the flex line.

18
00:00:54.009 --> 00:00:56.006
Let me say that one again.

19
00:00:56.006 --> 00:00:59.002
You can manipulate the order of flex children

20
00:00:59.002 --> 00:01:03.000
with Flexbox without touching the HTML structure.

21
00:01:03.000 --> 00:01:04.004
Very cool.

22
00:01:04.004 --> 00:01:06.001
This allows you to take advantage

23
00:01:06.001 --> 00:01:07.009
of the available view port space

24
00:01:07.009 --> 00:01:10.007
and lets elements arrange themselves automatically

25
00:01:10.007 --> 00:01:13.002
as the view port dictates.

26
00:01:13.002 --> 00:01:16.008
Flexbox is a one dimensional presentation model.

27
00:01:16.008 --> 00:01:18.006
That means that layouts are processed

28
00:01:18.006 --> 00:01:24.001
in one dimension at a time, either as a row or a column.

29
00:01:24.001 --> 00:01:27.007
You can define how space is distributed between elements

30
00:01:27.007 --> 00:01:30.005
and how they should be aligned in relationship

31
00:01:30.005 --> 00:01:33.001
to the parent container.

32
00:01:33.001 --> 00:01:35.002
There's a lot of benefits to Flexbox.

33
00:01:35.002 --> 00:01:38.006
Out of the gate, it's responsive and mobile friendly.

34
00:01:38.006 --> 00:01:40.000
It gives you a lot of control

35
00:01:40.000 --> 00:01:42.003
over how you position child elements

36
00:01:42.003 --> 00:01:45.002
and you can easily change the presentation order

37
00:01:45.002 --> 00:01:48.003
without ever touching the HTML.

38
00:01:48.003 --> 00:01:51.006
Also, you can easily alter and control both the width

39
00:01:51.006 --> 00:01:55.001
and the height to best work within the parent element.

40
00:01:55.001 --> 00:01:58.000
So while Flexbox can do some really cool things

41
00:01:58.000 --> 00:02:01.004
it generally works best on small scale layouts.

42
00:02:01.004 --> 00:02:06.000
Fully tackling Flexbox is out of the scope for this course

43
00:02:06.000 --> 00:02:08.006
but just in case I've got your curiosity peaked,

44
00:02:08.006 --> 00:02:11.002
I'll share with you one of my very favorite resources

45
00:02:11.002 --> 00:02:16.002
for Flexbox and that's this guide on "CSS Tricks".

46
00:02:16.002 --> 00:02:18.009
There's even a poster depicting Flexbox layouts

47
00:02:18.009 --> 00:02:21.004
that I bought from here and hung in my office.

48
00:02:21.004 --> 00:02:23.002
My friends call it my nerd poster

49
00:02:23.002 --> 00:02:25.002
and I'm pretty sure it's a compliment.