1
00:00:00,025 --> 00:00:06,036
[SOUND] Hey everyone, I'm Guil.

2
00:00:06,036 --> 00:00:10,337
Thanks for joining me here in CSS Flexbox
Layout where you'll learn one of the most

3
00:00:10,337 --> 00:00:13,650
advanced methods for laying out webpages.

4
00:00:13,650 --> 00:00:15,570
CSS lab methods like floats,

5
00:00:15,570 --> 00:00:19,820
in line block and absolute positioning
have certain limitations and were not

6
00:00:19,820 --> 00:00:24,610
designed to handle the layout demands
of today's complex responsive websites.

7
00:00:24,610 --> 00:00:26,780
Floats, for example,
weren't even intended for

8
00:00:26,780 --> 00:00:30,210
page layout, they were really meant for
wrapping text around images.

9
00:00:31,350 --> 00:00:33,250
As you learned in CSS Layout Basics,

10
00:00:33,250 --> 00:00:36,720
floats can be problematic because
of their quirky behavior.

11
00:00:36,720 --> 00:00:40,930
They require clear fixes to prevent
containing elements from collapsing.

12
00:00:40,930 --> 00:00:43,650
And with inline block display
you're always fighting with

13
00:00:43,650 --> 00:00:46,300
the default white space
created by the browser.

14
00:00:46,300 --> 00:00:49,820
And positioning can be tricky in page
layout because it requires positioning

15
00:00:49,820 --> 00:00:51,210
context and

16
00:00:51,210 --> 00:00:55,010
other content on the page behaves as if
the positioned elements didn't even exist.

17
00:00:56,432 --> 00:00:59,780
So, Flexbox, or Flexible Box Layout

18
00:00:59,780 --> 00:01:04,710
is a set of CSS properties that proved
a flexible way to layout page content.

19
00:01:04,710 --> 00:01:09,270
It's a remarkable layout feature that's
redefined how web designers build layouts.

20
00:01:09,270 --> 00:01:11,140
You get the benefits of floats,

21
00:01:11,140 --> 00:01:16,240
block, and inline block like stacking
elements and laying them out side by side

22
00:01:16,240 --> 00:01:19,600
without any of the strange browser
behaviors that come with using them.

23
00:01:20,890 --> 00:01:24,165
With Flexbox you can change the direction,
size and order or

24
00:01:24,165 --> 00:01:27,065
elements, like navigation links,
content columns and

25
00:01:27,065 --> 00:01:31,515
images, regardless of their original
size and order in the HTML.

26
00:01:31,515 --> 00:01:36,130
And it gives you simple yet intelligent
tools for placing your content anywhere

27
00:01:36,130 --> 00:01:40,250
from top to bottom, left to right,
center, and middle of a container.

28
00:01:40,250 --> 00:01:42,430
No matter where they
appear in the source code.

29
00:01:42,430 --> 00:01:46,225
You could even stretch and
shrink elements and distribute space.

30
00:01:46,225 --> 00:01:49,929
[NOISE] For instance,
you can create three equal height columns,

31
00:01:49,929 --> 00:01:52,430
regardless of which column is the tallest.

32
00:01:52,430 --> 00:01:56,372
Then, lay them out on the same line by
aligning the first column to the left edge

33
00:01:56,372 --> 00:01:57,820
of its container.

34
00:01:57,820 --> 00:01:59,670
And the last column to the right edge,

35
00:01:59,670 --> 00:02:02,280
while the second column sits
perfectly between the two.

36
00:02:02,280 --> 00:02:06,320
You can evenly distribute
the space inside the container so

37
00:02:06,320 --> 00:02:08,370
that the columns are of equal width.

38
00:02:08,370 --> 00:02:10,220
Or you can grow the width of one column,

39
00:02:10,220 --> 00:02:14,690
while automatically shrinking the width
of the two columns beside it.

40
00:02:14,690 --> 00:02:16,890
And you can easily rearrange
the column order and

41
00:02:16,890 --> 00:02:20,720
display them vertically on small screen
sizes without ever changing the markup.

42
00:02:21,910 --> 00:02:25,140
So all this with just a few lines of CSS.

43
00:02:25,140 --> 00:02:28,580
This makes building responsive
layouts that scale from small

44
00:02:28,580 --> 00:02:31,870
mobile devices to large desktop
screens easier than ever.

45
00:02:32,950 --> 00:02:35,980
So I'm excited to introduce
you to the powers of Flexbox.

46
00:02:35,980 --> 00:02:39,864
By the end of this course you'll be able
to build complex layouts in less time

47
00:02:39,864 --> 00:02:40,724
using Flexbox.