1
00:00:01.02 --> 00:00:02.05
- [Chris] Hi, this is Chris Converse

2
00:00:02.05 --> 00:00:04.04
and in this episode
we'll create some columns

3
00:00:04.04 --> 00:00:07.05
in our web page using
the CSS flex property.

4
00:00:07.05 --> 00:00:10.00
The flex property gives us
greater control over layouts

5
00:00:10.00 --> 00:00:11.05
and they're responsive allowing us

6
00:00:11.05 --> 00:00:14.00
to change the layout for smaller screens.

7
00:00:14.00 --> 00:00:16.02
And while the flex property
is still rather new,

8
00:00:16.02 --> 00:00:19.00
all modern HTML5 browsers
support the property,

9
00:00:19.00 --> 00:00:21.07
including partial support for IE11.

10
00:00:21.07 --> 00:00:23.04
So, if you'd like to follow along with me,

11
00:00:23.04 --> 00:00:24.08
download the exercise files

12
00:00:24.08 --> 00:00:29.03
and let's begin by opening
index.html in a text editor.

13
00:00:29.03 --> 00:00:30.08
Now, once you have the HTMl file open,

14
00:00:30.08 --> 00:00:34.03
in the top head area we
have a link to style.css

15
00:00:34.03 --> 00:00:36.02
which we'll open in a moment.

16
00:00:36.02 --> 00:00:40.06
In the body area we have
a main HTML5 element,

17
00:00:40.06 --> 00:00:42.08
inside of the main element we have an h1,

18
00:00:42.08 --> 00:00:44.03
and then a section element,

19
00:00:44.03 --> 00:00:45.06
and inside of the section element

20
00:00:45.06 --> 00:00:47.06
we have three div elements.

21
00:00:47.06 --> 00:00:50.06
This one here, one here and one here.

22
00:00:50.06 --> 00:00:51.08
It's these div elements

23
00:00:51.08 --> 00:00:52.06
that we're going to turn

24
00:00:52.06 --> 00:00:55.09
into columns using the flex property.

25
00:00:55.09 --> 00:00:57.02
And if you'd like to preview the layout

26
00:00:57.02 --> 00:00:58.01
we're going to be starting from,

27
00:00:58.01 --> 00:01:01.06
you can open index.html in a browser.

28
00:01:01.06 --> 00:01:02.04
And so now at this point

29
00:01:02.04 --> 00:01:04.00
let's go back to the exercise files.

30
00:01:04.00 --> 00:01:07.09
Let's open style.css
up in our text editor.

31
00:01:07.09 --> 00:01:09.00
Let's scroll down a little bit

32
00:01:09.00 --> 00:01:12.03
and let's first find the section selector,

33
00:01:12.03 --> 00:01:14.03
which is here on line 37.

34
00:01:14.03 --> 00:01:16.03
So, the section element
has the divs inside

35
00:01:16.03 --> 00:01:18.05
that we want to have
rendered into columns.

36
00:01:18.05 --> 00:01:20.02
So, on the section element here,

37
00:01:20.02 --> 00:01:22.02
let's come in, let's add a property.

38
00:01:22.02 --> 00:01:26.02
You can put this before or
after the margin setting.

39
00:01:26.02 --> 00:01:29.04
And let's come in here and set
a display property of flex,

40
00:01:29.04 --> 00:01:31.01
so that will turn the main section element

41
00:01:31.01 --> 00:01:34.00
into a flex object.

42
00:01:34.00 --> 00:01:36.07
Next line let's set a flex property,

43
00:01:36.07 --> 00:01:39.06
so the property we're going to
set is going to be flex direction,

44
00:01:39.06 --> 00:01:44.03
so flex-direction and we're
going to set this to row.

45
00:01:44.03 --> 00:01:45.01
Now, this is the value

46
00:01:45.01 --> 00:01:46.08
that's set for flex direction by default

47
00:01:46.08 --> 00:01:49.03
but I like to go ahead
and set this anyway.

48
00:01:49.03 --> 00:01:51.03
And so now with these two items in place,

49
00:01:51.03 --> 00:01:53.03
if we hit save and go back to the browser,

50
00:01:53.03 --> 00:01:55.06
we'll already begin to
see the div elements

51
00:01:55.06 --> 00:01:57.08
starting to render in columns.

52
00:01:57.08 --> 00:01:58.06
Now, one thing you might notice

53
00:01:58.06 --> 00:02:00.08
is that the columns are not even width.

54
00:02:00.08 --> 00:02:01.09
So, the first column here

55
00:02:01.09 --> 00:02:03.08
is less wide than the second column

56
00:02:03.08 --> 00:02:06.02
and the second column is less
wide than the third column.

57
00:02:06.02 --> 00:02:08.02
So, the widths are being
determined by the content

58
00:02:08.02 --> 00:02:10.02
inside of the div elements.

59
00:02:10.02 --> 00:02:12.04
So, at this point let's
go back to the CSS,

60
00:02:12.04 --> 00:02:15.06
let's find our section
with a greater than sign

61
00:02:15.06 --> 00:02:16.08
and then div.

62
00:02:16.08 --> 00:02:18.00
We're just targeting all the divs

63
00:02:18.00 --> 00:02:20.09
that are immediately inside
of the section element.

64
00:02:20.09 --> 00:02:23.02
I have a padding of 18 set here.

65
00:02:23.02 --> 00:02:24.02
So, after padding let's come in here

66
00:02:24.02 --> 00:02:26.05
and add some additional properties.

67
00:02:26.05 --> 00:02:30.02
First, let's add a
property called flex-basis

68
00:02:30.02 --> 00:02:31.09
and we're going to set this to zero

69
00:02:31.09 --> 00:02:33.04
and then put a semicolon.

70
00:02:33.04 --> 00:02:35.00
So, what this will do
is set the measurement

71
00:02:35.00 --> 00:02:38.02
of these items based on
the main parent container

72
00:02:38.02 --> 00:02:40.08
with a display of flex.

73
00:02:40.08 --> 00:02:41.09
If I hit save at this point

74
00:02:41.09 --> 00:02:43.01
and go back to the browser,

75
00:02:43.01 --> 00:02:44.04
we'll now see that all of the columns

76
00:02:44.04 --> 00:02:46.00
are now equal width.

77
00:02:46.00 --> 00:02:47.05
However, they're not taking the full width

78
00:02:47.05 --> 00:02:49.08
of the available space.

79
00:02:49.08 --> 00:02:51.05
So again, back to our CSS,

80
00:02:51.05 --> 00:02:55.07
after flex-basis in the
section greater then sign div,

81
00:02:55.07 --> 00:02:58.06
let's come in here and
add another property.

82
00:02:58.06 --> 00:03:02.00
Let's add flex-grow

83
00:03:02.00 --> 00:03:05.03
and we're going to set that
to one, then a semicolon.

84
00:03:05.03 --> 00:03:07.05
So, what this means is we're
applying the same value

85
00:03:07.05 --> 00:03:08.08
to every one of the div elements

86
00:03:08.08 --> 00:03:10.01
inside of section,

87
00:03:10.01 --> 00:03:11.04
and if they all have the same value,

88
00:03:11.04 --> 00:03:13.03
they're going to render
inside of that section element

89
00:03:13.03 --> 00:03:14.06
with the same width.

90
00:03:14.06 --> 00:03:16.04
So, with that in place, save your file,

91
00:03:16.04 --> 00:03:17.04
go back to the browser,

92
00:03:17.04 --> 00:03:19.00
hit reload and we'll
now see that the width

93
00:03:19.00 --> 00:03:20.08
of all of the columns is now equal,

94
00:03:20.08 --> 00:03:25.02
even if I resize the browser.

95
00:03:25.02 --> 00:03:27.07
So, at this point let's add
some additional CSS rules

96
00:03:27.07 --> 00:03:29.06
to remove these columns

97
00:03:29.06 --> 00:03:33.02
if our screen size is below 550 pixels.

98
00:03:33.02 --> 00:03:34.04
So, I'll change the
width of my browser here

99
00:03:34.04 --> 00:03:36.08
so that we're under 550,

100
00:03:36.08 --> 00:03:39.05
back to the CSS, let's scroll down.

101
00:03:39.05 --> 00:03:41.06
I've already put in an
in line media query here

102
00:03:41.06 --> 00:03:43.09
with a maximum width of 550.

103
00:03:43.09 --> 00:03:46.03
Let's come in here and
redefine some of the properties

104
00:03:46.03 --> 00:03:48.01
to remove these columns.

105
00:03:48.01 --> 00:03:48.09
So, the first thing we'll do

106
00:03:48.09 --> 00:03:50.07
is target the section element.

107
00:03:50.07 --> 00:03:54.03
So, I'll type section,
put in our brackets,

108
00:03:54.03 --> 00:03:55.09
split this open,

109
00:03:55.09 --> 00:03:57.03
and then the property we're
going to set inside of here

110
00:03:57.03 --> 00:03:59.05
is going to be flex-direction

111
00:03:59.05 --> 00:04:02.00
and we're going to set this
to column instead of row

112
00:04:02.00 --> 00:04:04.02
which is going to stack
the individual elements

113
00:04:04.02 --> 00:04:08.03
instead of having them render vertically.

114
00:04:08.03 --> 00:04:10.03
Next property we're going to set section,

115
00:04:10.03 --> 00:04:13.04
greater than sign, div.

116
00:04:13.04 --> 00:04:15.02
Let's put in our brackets.

117
00:04:15.02 --> 00:04:17.01
Split this open.

118
00:04:17.01 --> 00:04:19.03
Let's come in here and
change the padding property.

119
00:04:19.03 --> 00:04:21.02
We're going to set zero
padding on the top,

120
00:04:21.02 --> 00:04:22.08
14 pixels on the right,

121
00:04:22.08 --> 00:04:26.03
zero pixels on the bottom
and 80 pixels on the left.

122
00:04:26.03 --> 00:04:32.05
Next rule, section, space, div, space, h2.

123
00:04:32.05 --> 00:04:35.00
Put in our brackets, split this open.

124
00:04:35.00 --> 00:04:37.00
Let's come in here and set
a margin-left property.

125
00:04:37.00 --> 00:04:40.03
We're going to set this
to negative 65 pixels

126
00:04:40.03 --> 00:04:43.00
and then our final rule's
going to be section,

127
00:04:43.00 --> 00:04:50.05
space, div, space, image, split this open

128
00:04:50.05 --> 00:04:53.00
and then inside here we're going
to set a margin-left property

129
00:04:53.00 --> 00:04:56.01
to negative 65.

130
00:04:56.01 --> 00:04:57.07
With these in place you can hit save.

131
00:04:57.07 --> 00:04:59.02
Let's reload in the browser.

132
00:04:59.02 --> 00:05:01.08
We'll now see that we
have our heading twos

133
00:05:01.08 --> 00:05:05.01
and our images, negative
65 pixels to the left

134
00:05:05.01 --> 00:05:06.06
and we'll now see that
all of the div elements

135
00:05:06.06 --> 00:05:08.03
are now taking up the full width

136
00:05:08.03 --> 00:05:11.06
rendering in one single column.

137
00:05:11.06 --> 00:05:13.02
So, with just a few flex properties

138
00:05:13.02 --> 00:05:15.06
we're able to create columns
out of section elements

139
00:05:15.06 --> 00:05:19.00
and nest the div elements.

140
00:05:19.00 --> 00:05:19.09
And now we've only scratched

141
00:05:19.09 --> 00:05:21.06
the surface of the flex property.

142
00:05:21.06 --> 00:05:22.06
If you'd like to learn more,

143
00:05:22.06 --> 00:05:24.07
I'd recommend taking
James Williamson's course

144
00:05:24.07 --> 00:05:27.08
entitled CSS Flexbox First Look.

145
00:05:27.08 --> 00:05:29.09
And so with that, I'll
conclude this episode

146
00:05:29.09 --> 00:05:32.08
and as always, thanks for watching.