1
00:00:00,340 --> 00:00:04,110
Now that you know the basic concepts and
terminology, you're ready to learn

2
00:00:04,110 --> 00:00:09,060
the first step in creating a flex box
layout, defining the flex container.

3
00:00:09,060 --> 00:00:12,360
To follow along using Workspaces,
launch the Workspace on this page.

4
00:00:12,360 --> 00:00:16,380
You can also download the files to
follow along with your own text editor,

5
00:00:16,380 --> 00:00:17,930
if you prefer.

6
00:00:17,930 --> 00:00:24,360
In the Workspaces, in the index.html file
you'll see a div with the class container.

7
00:00:24,360 --> 00:00:30,060
Nested inside the container div are six
divs that share the class item.

8
00:00:32,020 --> 00:00:38,680
In the CSS folder you'll see
the files flexbox.css and page.css.

9
00:00:38,680 --> 00:00:42,770
In page.css I've added some
base styles for the page.

10
00:00:42,770 --> 00:00:47,050
You can see the base styles once you
preview the Workspace in the browser.

11
00:00:47,050 --> 00:00:51,060
As you can see, the container has
a white background color, and

12
00:00:51,060 --> 00:00:54,930
the item divs inside have
a light blue background color.

13
00:00:54,930 --> 00:01:00,540
There's also a five pixel
margin around the item divs.

14
00:01:00,540 --> 00:01:07,940
We're going to write our Flexbox
layout styles here inside flexbox.css.

15
00:01:07,940 --> 00:01:11,910
Currently, the item divs are in
the normal document flow.

16
00:01:11,910 --> 00:01:15,170
They display as stacked
block level elements

17
00:01:15,170 --> 00:01:17,400
in the order they appear in the mark up.

18
00:01:17,400 --> 00:01:21,310
When you apply Flexbox layout to
these items, you can place them

19
00:01:21,310 --> 00:01:26,120
anywhere in the container, for example,
if you make them appear side by side, and

20
00:01:26,120 --> 00:01:30,590
make the last item appear first,
or even second, third or fourth.

21
00:01:30,590 --> 00:01:33,410
Before you can use any Flexbox property,

22
00:01:33,410 --> 00:01:36,760
you need to define a flex
container in your layout.

23
00:01:36,760 --> 00:01:42,065
So, I'm going to make the parent
container div, the flex container.

24
00:01:42,065 --> 00:01:46,530
Flexbox gives you a whole new way
of using the CSS display property.

25
00:01:46,530 --> 00:01:51,090
You create a flex container by setting
the display property of an element

26
00:01:51,090 --> 00:01:53,068
to one of the Flexbox layout styles.

27
00:01:53,068 --> 00:01:57,715
So inside flexbox.css I'm
going to create a new rule

28
00:01:57,715 --> 00:02:01,790
that targets the class container.

29
00:02:01,790 --> 00:02:07,060
I'll give it a display property and
set the value to flex.

30
00:02:07,060 --> 00:02:13,170
Now I've established a flex formatting
context inside the container div.

31
00:02:13,170 --> 00:02:18,990
So every item div inside the container
div automatically becomes a flex item.

32
00:02:20,020 --> 00:02:25,080
So let's take a look at how the value
flex changed the container's layout.

33
00:02:25,080 --> 00:02:28,870
I'll save my style sheet, and
once I refresh the browser,

34
00:02:28,870 --> 00:02:33,090
we're now seeing the default
behavior of Flexbox layout.

35
00:02:33,090 --> 00:02:35,780
So the flex items are laid out

36
00:02:35,780 --> 00:02:39,790
horizontally on the main
axis from left to right.

37
00:02:39,790 --> 00:02:44,610
And they're also laid out on the cross
axis from the top start side

38
00:02:44,610 --> 00:02:47,860
to the bottom inside
of the flex container.

39
00:02:47,860 --> 00:02:50,930
So that means that the flex items expand

40
00:02:50,930 --> 00:02:53,650
to fill the full height
of the flex container.

41
00:02:53,650 --> 00:02:56,948
So let's what happens when I increase
the height of the container.

42
00:02:56,948 --> 00:03:02,450
Back inside flexbox.css
I'll give the container

43
00:03:02,450 --> 00:03:06,530
rule a height property and
set the value to 300 pixels.

44
00:03:08,770 --> 00:03:13,430
As you can see, the flex items stretch
to fill the flex container height.

45
00:03:13,430 --> 00:03:15,820
They're stretched from top to bottom.

46
00:03:15,820 --> 00:03:22,720
So from the start of the cross axis
to the end side of the cross axis.

47
00:03:22,720 --> 00:03:24,700
So now we have a Flexbox layout.

48
00:03:24,700 --> 00:03:25,910
Pretty simple so far, right?

49
00:03:27,040 --> 00:03:32,480
By default, display flex creates
a block level flex container.

50
00:03:32,480 --> 00:03:36,450
The flex container takes up a full line,
but

51
00:03:36,450 --> 00:03:38,810
it doesn't have to take up a full
line if you don't want it to.

52
00:03:40,600 --> 00:03:46,590
The display value inline-flex creates an inline level flex container.

53
00:03:46,590 --> 00:03:50,140
As you can see, there is no difference
in the effect on flex items.

54
00:03:50,140 --> 00:03:53,640
The flex container now behaves
like an inline element and

55
00:03:53,640 --> 00:03:56,600
takes up as much space as its content.

56
00:03:56,600 --> 00:04:00,430
So it can lay out beside other inline
content, but I'll go ahead and

57
00:04:00,430 --> 00:04:03,010
change the display value back to flex.

58
00:04:05,130 --> 00:04:07,980
Remember in Flexbox any element outside

59
00:04:07,980 --> 00:04:12,430
a flex container is not
affected by the Flexbox layout.

60
00:04:12,430 --> 00:04:17,040
Only children of a flex container
automatically become flex items.

61
00:04:17,040 --> 00:04:21,690
So that means if I add a new div
outside of the container div,

62
00:04:21,690 --> 00:04:24,950
it will not be affected
by flex box properties

63
00:04:24,950 --> 00:04:30,520
unless I also set its display
value to flex or inline-flex.

64
00:04:30,520 --> 00:04:32,170
We're just getting started.

65
00:04:32,170 --> 00:04:35,660
In the next section of the course,
you'll start to see why Flexbox is one of

66
00:04:35,660 --> 00:04:40,300
the most intelligent and efficient layout
solutions in web design and development.

67
00:04:40,300 --> 00:04:42,590
You're gonna learn advanced
Flexbox properties for

68
00:04:42,590 --> 00:04:45,930
layout direction, order,
alignment, sizing, and more.

69
00:04:45,930 --> 00:04:48,750
And after that,
you'll build a responsive webpage layout

70
00:04:48,750 --> 00:04:50,280
using your new Flexbox skills.