Preview
Video Player
00:00
00:00
Flexbox
8:21Looking ahead, the future of responsive grids is in flexbox. In this brief overview, we'll learn about the basics of this new collection of CSS properties and values.
We didn't use any responsive frameworks in
these lessons,
0:00
but the principles we apply are similar.
0:03
Most frameworks currently use floated
elements and
0:06
box sizing to make responsive calculations
slightly less complex.
0:09
However, looking ahead, the future of
responsive grids is in Flexbox.
0:14
I say the future because as of this
recording in early 2015 Flexbox is
0:19
only supported in modern browsers.
0:24
It works in Internet Explorer 11 and it
works using an older syntax in IE10.
0:27
But it does not work in versions older
than that.
0:32
Of course, this will get better with time
as people upgrade to newer browsers.
0:36
So it's worth thinking about now.
0:41
I'm going to open up a Flexbox guide from
CSS tricks that will
0:43
help us understand some of the concepts
here.
0:48
If you're following along you'll find a
link to this page in the notes
0:51
associated with this video.
0:55
I'm also going to open a workspace
associated with this video,
0:57
that includes an example.
1:01
So here I have the Complete Guide to
Flexbox on CSS-Tricks.
1:03
And, if we scroll down here, and lets open
up the Basics and Terminology section.
1:08
And, this chart is actually from the W3C
that
1:15
sets the standard for HTML, CSS, and many
other things.
1:19
And, it looks a little complicated at
first, but it's not as bad as it seems.
1:24
The first thing to pay attention to here
is the flex container.
1:30
So, the flex container is this entire box
here.
1:34
And, the flex container will make each
child element inside of it, a flex item.
1:39
And, that's what we have here.
1:47
So, what Flexbox does, is it basically
makes responsive web design
1:49
easier by making the container flex to the
available space.
1:54
And you'll also notice that we have this
main axis and the cross axis.
2:00
We're mostly going to be paying attention
to the main axis, though.
2:06
And while this is a horizontal line,
2:10
it could also end up being columns, as
we'll see, in just a moment.
2:14
So we can have rows or columns for the
main axis.
2:18
So let's scroll down here and while that
chart is helpful,
2:23
we actually used slightly different terms
for the actual properties.
2:30
So that's something else that's important
to understand here is that with Flexbox
2:35
you're not actually using a single CSS
property or value.
2:40
It's actually a collection of properties
and values.
2:44
The first one that's most important, and
2:48
probably already familiar to you, is
display.
2:50
And in this case, we're going to say
display flex.
2:54
And what that will do is create a context
for
2:58
all of the children inside of the flex
container.
3:01
So, we'll come back to here in just a
moment and look at this guide some more.
3:06
But let's open up the workspace associated
with this video.
3:13
Now this is a different workspace, than
what we've been using previously.
3:17
And, let's take a look at the preview just
to see what this looks like.
3:22
So here we have the beginnings of a
marketing website.
3:25
So, I've used the Treehouse logo here and
I have some navigation.
3:29
And, when we resize the browser, you'll
see that we have a minor break
3:35
point there, or maybe a major break point,
depending on how you wanna define it.
3:40
And then there's definitely a major break
point here when we swing that
3:45
horizontal navigation down to being
vertical navigation.
3:49
So, let's size this back up.
3:55
So, let's take a look at this because it's
pretty different than using floats and
3:58
box sizing like we were previously.
4:02
So, I have some very basic HTML here.
4:05
There's a header and it has the class
header on it.
4:10
And then, inside of that, there's two
elements.
4:15
There's this h1, which is the logo.
4:17
And then there's also this navigation,
4:20
which is an unordered list, and has the
class nav on it.
4:24
So let's switch back to our CSS, and see
how this is working.
4:28
There's header and nav in both of these
are set to display flex.
4:32
So, both the header and
4:38
the navigation nested inside of it, are
Flexbox contacts.
4:42
So, if we look at main.css, again, we can
see that the flex direction is column.
4:48
So, on our mobile layout, because this is
mobile first, we'll size this down.
4:53
You can see that the flex direction is in
a column.
4:59
So let's go back to the CSS tricks guide,
and
5:04
let's look at that flex direction
property.
5:09
It says this establishes the main axis, so
remember, I was saying that the main
5:12
axis could be horizontal, so you could say
flex direction row.
5:18
You could also reverse all of the child
elements by saying row reverse,
5:23
and then same thing with a column, so you
could have a column going straight down.
5:29
Or column reverse where all of the child
elements will be reversed.
5:35
So in this case, we're using both of
those.
5:41
We have the flex direction set to column,
but then we change it,
5:44
as we go to a slightly wider layout, by
switching to flex direction row.
5:49
Then, we're also using on nav the property
flex.
5:54
And, that's over here in this right
column,
6:00
because the left column is for parent
properties, the flex container.
6:03
And the right is for the children, the
flex items.
6:07
And if we go down here a little bit, we'll
see that flex is actually shorthand
6:11
and that's for flex grow, shrink, and
basis.
6:18
But really only the first one is required,
the second, and third are optional.
6:22
So we are saying flex1, we're basically
saying flex-grow1.
6:28
And if we go up to flex-grow, you can see
that that is a number and
6:34
it defines the ability for a flex item to
grow if necessary and
6:39
it basically serves as a proportion.
6:45
So you could have one which would be just
the whole container,
6:48
in the case of having one item.
6:53
Or if you have multiple items like with
our navigation,
6:56
they'll each take up an even amount of
space.
6:59
So that's what we've done here.
7:02
This is actually being applied to those
list items.
7:04
So, if we go back here, you can see,
finally, we have justified content.
7:09
And we're saving space between for the
header, and the space around for
7:13
the navigation.
7:17
And if we look at the justified content
right here,
7:17
we can see space between looks like this
and space around looks like this.
7:24
So basically space around will evenly
space all the elements.
7:29
But, if we say space between, it will
start at the beginning and
7:34
end right at the end and won't put any
space between the start and the end.
7:38
This is just a quick overview of Flexbox,
but
7:44
if you're ready to learn more, the notes
associated with this video includes
7:47
a link to another Treehouse course where
Flexbox is covered in much more detail.
7:52
In addition,
7:57
I've also included links to the Mozilla
Developer Network documentation.
7:58
And the CSS Tricks Guide that we were
using.
8:03
Hopefully in these lessons you've learned
more about the principles behind
8:07
responsive design.
8:11
Understanding the core underpinnings of
any big idea
8:13
will help you apply it to unfamiliar
situations and new projects.
8:16