1
00:00:00,240 --> 00:00:03,530
We didn't use any responsive frameworks in
these lessons,

2
00:00:03,530 --> 00:00:06,500
but the principles we apply are similar.

3
00:00:06,500 --> 00:00:09,760
Most frameworks currently use floated
elements and

4
00:00:09,760 --> 00:00:14,110
box sizing to make responsive calculations
slightly less complex.

5
00:00:14,110 --> 00:00:19,510
However, looking ahead, the future of
responsive grids is in Flexbox.

6
00:00:19,510 --> 00:00:24,640
I say the future because as of this
recording in early 2015 Flexbox is

7
00:00:24,640 --> 00:00:27,200
only supported in modern browsers.

8
00:00:27,200 --> 00:00:32,900
It works in Internet Explorer 11 and it
works using an older syntax in IE10.

9
00:00:32,900 --> 00:00:36,570
But it does not work in versions older
than that.

10
00:00:36,570 --> 00:00:41,080
Of course, this will get better with time
as people upgrade to newer browsers.

11
00:00:41,080 --> 00:00:43,720
So it's worth thinking about now.

12
00:00:43,720 --> 00:00:48,250
I'm going to open up a Flexbox guide from
CSS tricks that will

13
00:00:48,250 --> 00:00:51,420
help us understand some of the concepts
here.

14
00:00:51,420 --> 00:00:55,070
If you're following along you'll find a
link to this page in the notes

15
00:00:55,070 --> 00:00:57,050
associated with this video.

16
00:00:57,050 --> 00:01:01,090
I'm also going to open a workspace
associated with this video,

17
00:01:01,090 --> 00:01:03,650
that includes an example.

18
00:01:03,650 --> 00:01:08,850
So here I have the Complete Guide to
Flexbox on CSS-Tricks.

19
00:01:08,850 --> 00:01:15,420
And, if we scroll down here, and lets open
up the Basics and Terminology section.

20
00:01:15,420 --> 00:01:19,780
And, this chart is actually from the W3C
that

21
00:01:19,780 --> 00:01:24,950
sets the standard for HTML, CSS, and many
other things.

22
00:01:24,950 --> 00:01:30,740
And, it looks a little complicated at
first, but it's not as bad as it seems.

23
00:01:30,740 --> 00:01:34,950
The first thing to pay attention to here
is the flex container.

24
00:01:34,950 --> 00:01:39,860
So, the flex container is this entire box
here.

25
00:01:39,860 --> 00:01:47,220
And, the flex container will make each
child element inside of it, a flex item.

26
00:01:47,220 --> 00:01:49,008
And, that's what we have here.

27
00:01:49,008 --> 00:01:54,320
So, what Flexbox does, is it basically
makes responsive web design

28
00:01:54,320 --> 00:02:00,410
easier by making the container flex to the
available space.

29
00:02:00,410 --> 00:02:06,800
And you'll also notice that we have this
main axis and the cross axis.

30
00:02:06,800 --> 00:02:10,990
We're mostly going to be paying attention
to the main axis, though.

31
00:02:10,990 --> 00:02:14,540
And while this is a horizontal line,

32
00:02:14,540 --> 00:02:18,920
it could also end up being columns, as
we'll see, in just a moment.

33
00:02:18,920 --> 00:02:23,900
So we can have rows or columns for the
main axis.

34
00:02:23,900 --> 00:02:30,710
So let's scroll down here and while that
chart is helpful,

35
00:02:30,710 --> 00:02:35,540
we actually used slightly different terms
for the actual properties.

36
00:02:35,540 --> 00:02:40,290
So that's something else that's important
to understand here is that with Flexbox

37
00:02:40,290 --> 00:02:44,380
you're not actually using a single CSS
property or value.

38
00:02:44,380 --> 00:02:48,190
It's actually a collection of properties
and values.

39
00:02:48,190 --> 00:02:50,170
The first one that's most important, and

40
00:02:50,170 --> 00:02:52,969
probably already familiar to you, is
display.

41
00:02:54,020 --> 00:02:58,010
And in this case, we're going to say
display flex.

42
00:02:58,010 --> 00:03:01,800
And what that will do is create a context
for

43
00:03:01,800 --> 00:03:05,800
all of the children inside of the flex
container.

44
00:03:06,850 --> 00:03:13,010
So, we'll come back to here in just a
moment and look at this guide some more.

45
00:03:13,010 --> 00:03:17,260
But let's open up the workspace associated
with this video.

46
00:03:17,260 --> 00:03:22,100
Now this is a different workspace, than
what we've been using previously.

47
00:03:22,100 --> 00:03:25,880
And, let's take a look at the preview just
to see what this looks like.

48
00:03:25,880 --> 00:03:29,790
So here we have the beginnings of a
marketing website.

49
00:03:29,790 --> 00:03:35,980
So, I've used the Treehouse logo here and
I have some navigation.

50
00:03:35,980 --> 00:03:40,950
And, when we resize the browser, you'll
see that we have a minor break

51
00:03:40,950 --> 00:03:45,580
point there, or maybe a major break point,
depending on how you wanna define it.

52
00:03:45,580 --> 00:03:49,900
And then there's definitely a major break
point here when we swing that

53
00:03:49,900 --> 00:03:53,980
horizontal navigation down to being
vertical navigation.

54
00:03:55,150 --> 00:03:57,180
So, let's size this back up.

55
00:03:58,790 --> 00:04:02,730
So, let's take a look at this because it's
pretty different than using floats and

56
00:04:02,730 --> 00:04:04,720
box sizing like we were previously.

57
00:04:05,790 --> 00:04:10,380
So, I have some very basic HTML here.

58
00:04:10,380 --> 00:04:15,030
There's a header and it has the class
header on it.

59
00:04:15,030 --> 00:04:17,600
And then, inside of that, there's two
elements.

60
00:04:17,600 --> 00:04:20,780
There's this h1, which is the logo.

61
00:04:20,780 --> 00:04:24,030
And then there's also this navigation,

62
00:04:24,030 --> 00:04:28,630
which is an unordered list, and has the
class nav on it.

63
00:04:28,630 --> 00:04:32,820
So let's switch back to our CSS, and see
how this is working.

64
00:04:32,820 --> 00:04:38,890
There's header and nav in both of these
are set to display flex.

65
00:04:38,890 --> 00:04:42,290
So, both the header and

66
00:04:42,290 --> 00:04:48,160
the navigation nested inside of it, are
Flexbox contacts.

67
00:04:48,160 --> 00:04:53,760
So, if we look at main.css, again, we can
see that the flex direction is column.

68
00:04:53,760 --> 00:04:59,210
So, on our mobile layout, because this is
mobile first, we'll size this down.

69
00:04:59,210 --> 00:05:04,710
You can see that the flex direction is in
a column.

70
00:05:04,710 --> 00:05:09,720
So let's go back to the CSS tricks guide,
and

71
00:05:09,720 --> 00:05:12,520
let's look at that flex direction
property.

72
00:05:12,520 --> 00:05:18,725
It says this establishes the main axis, so
remember, I was saying that the main

73
00:05:18,725 --> 00:05:23,970
axis could be horizontal, so you could say
flex direction row.

74
00:05:23,970 --> 00:05:29,860
You could also reverse all of the child
elements by saying row reverse,

75
00:05:29,860 --> 00:05:35,360
and then same thing with a column, so you
could have a column going straight down.

76
00:05:35,360 --> 00:05:40,160
Or column reverse where all of the child
elements will be reversed.

77
00:05:41,380 --> 00:05:44,650
So in this case, we're using both of
those.

78
00:05:44,650 --> 00:05:49,130
We have the flex direction set to column,
but then we change it,

79
00:05:49,130 --> 00:05:54,850
as we go to a slightly wider layout, by
switching to flex direction row.

80
00:05:54,850 --> 00:06:00,630
Then, we're also using on nav the property
flex.

81
00:06:00,630 --> 00:06:03,100
And, that's over here in this right
column,

82
00:06:03,100 --> 00:06:07,690
because the left column is for parent
properties, the flex container.

83
00:06:07,690 --> 00:06:10,560
And the right is for the children, the
flex items.

84
00:06:11,640 --> 00:06:17,150
And if we go down here a little bit, we'll
see that flex is actually shorthand

85
00:06:18,190 --> 00:06:22,580
and that's for flex grow, shrink, and
basis.

86
00:06:22,580 --> 00:06:28,620
But really only the first one is required,
the second, and third are optional.

87
00:06:28,620 --> 00:06:34,370
So we are saying flex1, we're basically
saying flex-grow1.

88
00:06:34,370 --> 00:06:39,967
And if we go up to flex-grow, you can see
that that is a number and

89
00:06:39,967 --> 00:06:45,255
it defines the ability for a flex item to
grow if necessary and

90
00:06:45,255 --> 00:06:48,591
it basically serves as a proportion.

91
00:06:48,591 --> 00:06:53,532
So you could have one which would be just
the whole container,

92
00:06:53,532 --> 00:06:56,011
in the case of having one item.

93
00:06:56,011 --> 00:06:59,503
Or if you have multiple items like with
our navigation,

94
00:06:59,503 --> 00:07:02,900
they'll each take up an even amount of
space.

95
00:07:02,900 --> 00:07:04,220
So that's what we've done here.

96
00:07:04,220 --> 00:07:07,510
This is actually being applied to those
list items.

97
00:07:09,240 --> 00:07:13,100
So, if we go back here, you can see,
finally, we have justified content.

98
00:07:13,100 --> 00:07:17,020
And we're saving space between for the
header, and the space around for

99
00:07:17,020 --> 00:07:17,770
the navigation.

100
00:07:17,770 --> 00:07:24,550
And if we look at the justified content
right here,

101
00:07:24,550 --> 00:07:29,560
we can see space between looks like this
and space around looks like this.

102
00:07:29,560 --> 00:07:34,080
So basically space around will evenly
space all the elements.

103
00:07:34,080 --> 00:07:38,840
But, if we say space between, it will
start at the beginning and

104
00:07:38,840 --> 00:07:43,110
end right at the end and won't put any
space between the start and the end.

105
00:07:44,555 --> 00:07:47,745
This is just a quick overview of Flexbox,
but

106
00:07:47,745 --> 00:07:52,155
if you're ready to learn more, the notes
associated with this video includes

107
00:07:52,155 --> 00:07:57,815
a link to another Treehouse course where
Flexbox is covered in much more detail.

108
00:07:57,815 --> 00:07:58,525
In addition,

109
00:07:58,525 --> 00:08:03,188
I've also included links to the Mozilla
Developer Network documentation.

110
00:08:03,188 --> 00:08:07,510
And the CSS Tricks Guide that we were
using.

111
00:08:07,510 --> 00:08:11,590
Hopefully in these lessons you've learned
more about the principles behind

112
00:08:11,590 --> 00:08:13,170
responsive design.

113
00:08:13,170 --> 00:08:16,800
Understanding the core underpinnings of
any big idea

114
00:08:16,800 --> 00:08:20,990
will help you apply it to unfamiliar
situations and new projects.