IntroductionWelcome| 00:00 |
(MUSIC).
Hi, I'm James Williamson, senior author
| | 00:06 |
here at Lynda.com, and I want to welcome
you to Flexbox First Look.
| | 00:11 |
Flexbox gives us exciting new capabilities
for controlling element layout in CSS that
| | 00:15 |
traditional methods lack.
We'll begin exploring flexbox by first
| | 00:19 |
looking at current browser support, and
when it's appropriate to use.
| | 00:23 |
Next up we'll explore how to define flex
items, and look at the relationship
| | 00:27 |
between flex containers and their content.
We'll then go through the various
| | 00:32 |
properties that you can control through
flexbox, such as positioning items,
| | 00:36 |
defining size ratios, and controlling the
display order of elements.
| | 00:41 |
Along the way our exercises will be
supplemented with challenges that allow
| | 00:45 |
you put what you've learned to a real
world test.
| | 00:49 |
I'm extremely excited about the future of
CSS layout and the role that flexbox will
| | 00:53 |
play in it, so grab your favorite code
editor and let's take a first look at flexbox.
| | 00:59 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
If you're a premium member of the
lynda.com online training library, you
| | 00:03 |
have access to the exercise files that are
used throughout this title.
| | 00:08 |
Exercise files for this title are arranged
by chapter, and they're located in folders
| | 00:11 |
that are named based on the movie they
represent.
| | 00:15 |
Since each exercise is self contained,
you'll be working with each folder individually.
| | 00:20 |
I recommend copying the entire exercise
files directory to the desktop, and then
| | 00:23 |
working on the files from the appropriate
folder.
| | 00:27 |
I'll call out the location of the exercise
files for each movie, and you should see a
| | 00:30 |
brief overlay that will also tell you
where to find those exercise files.
| | 00:34 |
I also want to take just a moment to talk
about the code editor that I'm going to be
| | 00:37 |
using for this course.
I'll be working in Brackets which is an
| | 00:41 |
open source code editor built from HTML,
JavaScript and CSS.
| | 00:46 |
It's fast, lightweight and has a growing
number of extensions that make it a very
| | 00:49 |
attractive editor.
Currently, Brackets is still considered a
| | 00:52 |
beta release, but I find it to be very
reliable.
| | 00:55 |
I'm using Brackets for this title for
several reasons.
| | 00:58 |
Number one, it's free.
So if you don't have a favorite code
| | 01:00 |
editor you can download it and try it out.
Number two, it has a live preview that's
| | 01:05 |
tied directly into Google Chrome.
Since Chrome's support for flexbox will
| | 01:08 |
allow us to accurately preview our files,
it's a natural choice for this course.
| | 01:13 |
And three, it's very minimal.
So we can focus on just the code itself.
| | 01:18 |
In the end, it doesn't matter if you use
Brackets or any other code editor, just
| | 01:20 |
use the tool that you're most comfortable
with.
| | 01:24 |
It's also worth noting at this stage,
support for flexbox among browsers is
| | 01:27 |
still evolving.
I'll be previewing our pages using Chrome,
| | 01:31 |
but you could also preview using Internet
Explorer 10, Opera, or Firefox Nightly
| | 01:35 |
Build, with the flexbox flag enabled.
Browser support is evolving rapidly
| | 01:41 |
however, so be sure to check out current
support levels among browsers, before
| | 01:44 |
starting the course.
| | 01:46 |
| | Collapse this transcript |
|
|
1. Flexbox BasicsFlexbox overview| 00:00 |
Before we begin working with flexbox, I
want to take a moment to give you a brief
| | 00:03 |
overview of what flexbox can do for us and
why it's so important.
| | 00:09 |
Controlling the layout of webpages has
always been a little tricky.
| | 00:13 |
At first, there were almost no mechanisms
for page layout, other than just some
| | 00:16 |
basic formatting options.
From there the evolution of CSS gave us
| | 00:21 |
control over elements box model, the
ability to float elements to the right or
| | 00:24 |
to the left of each other and gave us
basic positioning models like absolute
| | 00:28 |
positioning or fixed positioning.
We've been using these tools for so long
| | 00:34 |
that most of us have gotten pretty good at
building complex layouts from just these
| | 00:38 |
capabilities, but If you think about it,
these are not very sophisticated layout tools.
| | 00:44 |
In reality, even the simplest layout tasks
are very difficult to control.
| | 00:48 |
Take aligning an element vertically inside
its parent.
| | 00:51 |
Using existing CSS capabilities, you have
to hack through several different
| | 00:54 |
techniques before getting what you want.
Frankly, layouts shouldn't be this hard.
| | 01:00 |
That's where flexbox comes in.
Flexbox is just one of several new CSS
| | 01:04 |
layout models that are designed to finally
make crafting CSS layouts as easy and as
| | 01:08 |
powerful as it should be.
Flexbox allows you to control the
| | 01:13 |
alignment, spacing and sizing of elements
relative to their parents.
| | 01:17 |
This means that flexbox is ideally suited
for controlling elements along a single
| | 01:21 |
axis or handling complex element
alignment.
| | 01:25 |
Using flexbox is pretty simple.
First, you define a parent element as a
| | 01:29 |
flex container.
This in turn defines any direct child
| | 01:32 |
element as a flex item.
Then, using various flexbox properties,
| | 01:37 |
you can control the orientation,
alignment, size, and spacing of the flex items.
| | 01:43 |
In order to really understand how flexbox
works, you first have to understand the
| | 01:47 |
concept of main and cross axis.
When you define a flex container, you also
| | 01:51 |
define the flow direction for flex items
inside of it.
| | 01:54 |
Row will set the main axis to horizontal,
while column sets it to vertical.
| | 01:58 |
Understanding this is really important,
because many flexbox properties are
| | 02:02 |
measured either along the cross or the
main axis.
| | 02:06 |
Without understanding the flow direction,
controlling flex items would be rather difficult.
| | 02:10 |
Once support for flexbox and other new
layout modes like CSS grids becomes
| | 02:13 |
widespread, we'll probably begin combining
them the same way we combine floats and
| | 02:17 |
positioning now.
It's likely that you'll control overall
| | 02:21 |
page layout through using grids.
And then use flexbox to control element
| | 02:24 |
alignment and spacing.
So as we go through and explore the
| | 02:27 |
capabilities of flexbox, try not to think
of it as a total solution to layout problems.
| | 02:33 |
Rather, think of it as a powerful new
capability to assist you when you begin
| | 02:36 |
crafting page layouts.
| | 02:38 |
| | Collapse this transcript |
| Current support| 00:00 |
This is a movie that I'm always a little
hesitant about recording as I am positive
| | 00:04 |
that the support for flexbox at the time I
record this is going to differ
| | 00:08 |
dramatically from the time when you view
it.
| | 00:12 |
Still it's really helpful for you to get
an overall picture of where flexbox is
| | 00:16 |
regarding broswer suppport.
So that you can choose when it's effective
| | 00:20 |
to add to your projects.
Flexbox is also really tricky, to discuss
| | 00:25 |
in terms of support, due to the
differences in the flexbox syntax.
| | 00:30 |
The original 2009 version, was supported
by some browsers, but wasn't gaining a lot
| | 00:34 |
of traction.
This led Tab Atkins to take over the
| | 00:38 |
specification in 2011 and make sweeping
changes to the syntax.
| | 00:43 |
A handful of browsers added support for
the 2011 version, most notably IE10.
| | 00:48 |
However, Tab wasn't done revising the
syntax which led some people to call the
| | 00:53 |
2011 syntax tweener syntax.
In 2012, a new version was released and it
| | 00:59 |
reached a stable working draft.
Multiple browsers have added support for
| | 01:03 |
the 2012 syntax both in prefixed and
unprefixed versions.
| | 01:07 |
As you can imagine, this can make it
rather difficult to work with flexbox.
| | 01:12 |
Older browsers either don't support it at
all, or support the now dead 2009 syntax.
| | 01:18 |
Internet Explorer 10, supports the 2011
tweener syntax, which almost no one else uses.
| | 01:25 |
All modern browsers going forward are
supporting the 2012 version.
| | 01:29 |
So here's a brief list of browser support
for flexbox, at the time of this recording.
| | 01:34 |
As you can see, Firefox only supports the
2009 syntax.
| | 01:38 |
However the new syntax is unprefixed
currently in the nightly build.
| | 01:43 |
Now what does that mean?
It means if you go and download the
| | 01:46 |
sort of beta nightly version of Firefox,
it's available unprefixed in that.
| | 01:51 |
Because it's unprefixed and nightly I
expected it to be rolled out very, very soon.
| | 01:55 |
So by the time you watch this it may be
already unprefixed inside Firefox.
| | 02:00 |
Google Chrome supports it in versions 22
and above but it uses a web kit prefix.
| | 02:05 |
Safari supports 2009 syntax from 5.1 and
above.
| | 02:10 |
Opera supports it in 12.1 and above
unprefixed and just fully great.
| | 02:14 |
So good on you, Opera.
Internet Explorer versions 10 and above,
| | 02:18 |
but it uses the Microsoft prefix and it
supports the older tweener syntax, that
| | 02:23 |
2011 syntax.
IOS on Safari supports the older 2009
| | 02:27 |
syntax and Opera Mini does not play well
at all with flexbox.
| | 02:33 |
Opera Mobile versions 12 and above support
it unprefixed as well.
| | 02:36 |
So Opera support is really, really good.
For the Android browser, 2.1 and above
| | 02:41 |
support the 2009 syntax with the webkit
prefix.
| | 02:45 |
But, new support should be coming very
soon.
| | 02:47 |
And, surprise, surprise, the new
Blackberry browser, 10 and above, supports
| | 02:52 |
flexbox in an unprefixed fashion.
So, what does all this mean?
| | 02:57 |
Well, for the time being, it means that
you should consider flexbox experimental.
| | 03:02 |
Unless you're developing an app that
targets a supported browser.
| | 03:06 |
To use flexbox in a production site,
you'll need to use the 2012 syntax, feed
| | 03:10 |
Internet Explorer 10 tweener syntax,
provide 2009 syntax support fallbacks for
| | 03:15 |
older browsers.
And then provide non-flexbox fall-backs
| | 03:20 |
for non-supporting user agents.
Sounds like fun, right?
| | 03:25 |
So does this mean that you should just
plain out ignore flexbox?
| | 03:28 |
Well, no.
Since 2012, the adoption of flexbox by
| | 03:31 |
browsers has been absolutely tremendous.
Other than having to make minor
| | 03:36 |
considerations for Internet Explorer 10,
once the older browsers can be dropped
| | 03:39 |
from your support list, flexbox is
going to be ready to use.
| | 03:44 |
I recommend checking caniuse.com
frequently to see how support for flexbox
| | 03:47 |
is evolving and keeping an eye on when it
makes sense to add to your own projects.
| | 03:53 |
| | Collapse this transcript |
| Defining flex elements| 00:00 |
Before you can start using flexbox, you
first need to define elements on the page
| | 00:04 |
as flex containers.
Doing this allows you to target exactly
| | 00:08 |
the elements on the page that you want to
control with flexbox.
| | 00:13 |
By defining an element as a flex
container, all of that element's direct
| | 00:16 |
descendants become flex items.
So, to illustrate this we're going to be
| | 00:22 |
working with the flex_container file which
is found in the 01_03 folder.
| | 00:28 |
Now, before we start this exercise, I
want to do just a tad bit of housekeeping,
| | 00:31 |
if you will.
All of the exercise files are very similar.
| | 00:35 |
In their structure and the way that we're
going to be working with them.
| | 00:38 |
So I just want to go over that with this
first one.
| | 00:40 |
So if we take a look at the page
structure.
| | 00:43 |
We've got a little header section that
talks a little about the course, and
| | 00:45 |
flexbox itself.
Below that we have an article that talks
| | 00:49 |
about the actual concepts that you're
going to be working with.
| | 00:52 |
And then below that we have the elements
that we're going to be controlling through flexbox.
| | 00:57 |
Notice we have a section with a class of
flex container and in this case, we have
| | 01:00 |
four divs with a class of box inside of
it.
| | 01:03 |
If I were to preview this in my browser,
you can see here is the little
| | 01:06 |
introductory section up top, we have a
little bit about defining flex containers
| | 01:09 |
and then we have the elements that we're
going to be controlling themselves.
| | 01:15 |
Now, in terms of the way that I'm going to
write my styles I'm going to write all the
| | 01:18 |
styles here embedded within the HTML page.
Normally, I would externalize them, but
| | 01:23 |
for the purpose of these exercises it's
perfect just to keep them all in one place.
| | 01:27 |
A word about the syntax.
I'm going to be using the 2012 syntax.
| | 01:31 |
And for every property that we write I'm
going to show you the web kit prefix, the
| | 01:34 |
Microsoft prefix for Internet Explorer 10,
that's going to be the 2011 tweener syntax.
| | 01:40 |
And the unprefixed syntax.
So that means that, most of the time,
| | 01:44 |
you're going to be writing these
properties three times.
| | 01:47 |
It's going to give you a good idea about
the differences between the versions of
| | 01:49 |
the syntax, at least the tweener syntax
and the more recent one.
| | 01:52 |
And also show you how to practically apply
it if you're going to add it to your projects.
| | 01:57 |
Alright, so after, I'm going to go into
.flex-container this is the selector
| | 02:00 |
that's controlling the parent section.
I'm going to go ahead and create a new line.
| | 02:05 |
And I'm just going to type in display and
I'm actually going to start with webkit.
| | 02:09 |
So I'm going to do -webkit-flex.
After that, I'm going to do display again.
| | 02:18 |
This is going to be -ms-flexbox.
Notice the difference in the syntax there.
| | 02:26 |
And then finally one last display property
of flex.
| | 02:29 |
So obviously the first line will target
all webkit based user agents that supports flexbox.
| | 02:36 |
The second line targets Internet Explorer
10 and then the last line is the
| | 02:39 |
unprefixed version of flexbox, and in
terms of pure syntax it's this last line
| | 02:42 |
that you really want to pay attention to.
Once we're able to unprefix everything
| | 02:48 |
this'll be the syntax that you use.
Alright, I'm going to go ahead and save
| | 02:51 |
this file.
And then preview it in my browser.
| | 02:55 |
So there's a slight visual difference, but
the thing that I want you to focus on is
| | 02:58 |
that now that parent section is a flex
container and now that it is a flex
| | 03:01 |
container we can start using flexbox to
control the child elements inside of it.
| | 03:07 |
Understanding that relationship between
the flex container and the flex items that
| | 03:11 |
are contained within it is crucial to
understanding how flexbox works.
| | 03:15 |
| | Collapse this transcript |
| Understanding flex axes| 00:00 |
Throughout this course, you'll hear me use
the term main axis and cross axis when
| | 00:04 |
referring to how flexbox controls the
distribution and layout of elements.
| | 00:10 |
You'll need to understand how these axes
work in order to correctly control flexbox properties.
| | 00:15 |
So I want to take a moment to discuss flex
axes before we get into discussing the
| | 00:19 |
actual properties themselves.
When you create a flex container, the flex
| | 00:24 |
items inside of it are arranged along the
main axis and cross axis based on the
| | 00:27 |
properties you set.
The easiest way to visualize this is to
| | 00:32 |
think about a flex container as either row
or a column.
| | 00:36 |
If the flex container is set to display as
a row, the main axis runs horizontally,
| | 00:40 |
while the cross axis runs vertically.
If it's set to be a column, then the main
| | 00:47 |
axis is vertical while the cross axis is
horizontal.
| | 00:51 |
This is very important to remember as
flexbox has properties that control
| | 00:55 |
alignment based on main and cross axis.
If you don't understand which axis is
| | 01:00 |
currently the main axis it's very
difficult to know exactly which property
| | 01:04 |
to use.
The same concept is used for sizing flex
| | 01:07 |
items as well.
An item's main size and cross size run in
| | 01:11 |
the same direction as the main axis.
So, how do you control the direction of
| | 01:15 |
the main axis?
Well, that's controlled with the flex flow
| | 01:19 |
property which we're going to explore in
detail in the next exercise.
| | 01:22 |
The important thing to remember as you
learn flexbox is that the direction of the
| | 01:26 |
main axis will determine which properties
you'll need to use to control alignment
| | 01:29 |
and spacing.
So be sure you focus on keeping track of
| | 01:34 |
flex axes, as you begin working with
flexbox.
| | 01:37 |
| | Collapse this transcript |
| Controlling element flow| 00:00 |
After creating a flex container, you then
need to establish the flex flow direction
| | 00:04 |
in order to establish the direction of the
main axis.
| | 00:08 |
Now that sounds really complex, but in
simple terms you're just defining the flex
| | 00:12 |
container as either a row or a column.
So here I have the flow.htm opened up from 01_05.
| | 00:21 |
And again this is pretty much the same
file that we were working on last time.
| | 00:25 |
You can see it has section down here with
a class of flex container and then we have
| | 00:28 |
four divs in here with a class of box
applied to them.
| | 00:32 |
So in order to set the flow direction of a
container I'm going to go down to the next
| | 00:37 |
line here inside my selector.
And I'll tell you what, I'm just going to
| | 00:42 |
paste some code in here for you because
this is a lot easier than watching me type.
| | 00:45 |
What we're doing is we're controlling the
flex direction property.
| | 00:49 |
Flex direction.
So again, notice that we have webkit flex direction.
| | 00:54 |
Ms-flex-direction, so all that's added
there are the vendor prefixes.
| | 00:58 |
And then the flex direction property
itself.
| | 01:00 |
Now we're going to start with row.
If I save this, and preview it in my
| | 01:04 |
browser, it really doesn't look that
different than when we ended up our last
| | 01:08 |
exercise where everything just sort of
displayed as a row anyway.
| | 01:14 |
Well that's because the default main axis
or the default flow direction is row.
| | 01:18 |
So you don't really need to explicitly
state it to get row, but since we're not
| | 01:22 |
really sure how all user agents are
going to implement it it's really not a
| | 01:25 |
bad idea.
Now, let's take a look at some of the
| | 01:29 |
values that that flex flow property will
accept.
| | 01:32 |
So in addition to row, I can do column.
So I'm going to go ahead and add column
| | 01:37 |
for each of these.
I'll save that and we'll go back to our browser.
| | 01:45 |
Now you can see that our flex container is
displaying the flex items as a column.
| | 01:48 |
Now, I think one of the more interesting
things that you can do with this is that
| | 01:52 |
you can also reverse the direction.
So you can see, right here in my code
| | 01:55 |
heading it's saying column reverse.
So notice that if I do that, and save it.
| | 02:03 |
Go back into the browser.
Now notice that it's still in a column but
| | 02:06 |
the last item, four, is actually first and
the first item is last.
| | 02:11 |
That's really neat because it gives you a
degree of source order independence just
| | 02:14 |
by using this one property.
Now in addition to column reverse, we also
| | 02:18 |
have row reverse.
So you can do that as well.
| | 02:24 |
Let me save that, go back into my browser.
And you can see what this does for us,
| | 02:27 |
whereas before, the entire, all the flex
items in a row were against the left hand
| | 02:31 |
side and it started out with number one.
Now they're actually all against the right
| | 02:36 |
hand side and they start at least from the
left to right with number four.
| | 02:40 |
So it is flipping them if you will and
pushing them all the way to the other side
| | 02:43 |
of their parent element.
Now I'm going to end this by just going
| | 02:47 |
back to row.
Saving it and then going back to the
| | 02:52 |
browser and you can see the results.
Now keep in mind if you don't set a flex
| | 02:57 |
direction it does default to row.
However since knowing the direction of the
| | 03:01 |
main axis is so important, I highly
recommend using flex flow to explicitly
| | 03:05 |
set it.
Especially since it also allows you to
| | 03:08 |
control content wrapping which we'll
explore next.
| | 03:11 |
| | Collapse this transcript |
| Content wrapping| 00:00 |
By default all flexbox containers are
single lined containers, and they will
| | 00:04 |
size, align and space your flex items
along that one single line.
| | 00:10 |
If you want to have your flex items
wrapped to a new line rather than overflow
| | 00:13 |
you're going to need to use the flex wrap
property.
| | 00:17 |
So, I'm in the wrap.htm file from the
01_06 directory.
| | 00:24 |
And, again we're kind of just picking up
where we left off I'm going to modify our
| | 00:27 |
flex container here really quickly.
I'm just going to go ahead and give it a
| | 00:33 |
width of 600 pixels.
save that.
| | 00:36 |
Go to my browser.
And you can see just a couple things have
| | 00:40 |
changed here.
Number one, we have some extra elements.
| | 00:44 |
So where before we only had four boxes,
now we have seven.
| | 00:47 |
And you can sort of see, that there's
actually a little bit of an overflow
| | 00:50 |
because that's the 600 pixel width right
there.
| | 00:54 |
So, elements six and seven are kind of
overflowing, if you will, the boundaries
| | 00:57 |
of their parent container.
and that's because flex items, by default,
| | 01:02 |
are just single line items.
So going back into our code, let's change that.
| | 01:06 |
To change that, we're going to use a
property called flex wrap.
| | 01:10 |
I'm going to go ahead and type in
webkit-flex-wrap and we're going to do
| | 01:15 |
wrap and then -ms-flex-wrap and that will
also be wrap and then finally we'll just
| | 01:23 |
do the default flex-wrap: wrap.
So if I save this, go back out to the
| | 01:30 |
browser, now you can see that instead of
staying single lined because of the fixed
| | 01:34 |
width of the container.
It's going ahead and breaking those down
| | 01:39 |
onto a new line so that it fits all within
the container.
| | 01:43 |
Now you may have noticed when I was typing
in the shortcut that there's also a wrap-reverse.
| | 01:49 |
So just the same way that there are row
and column reverses.
| | 01:53 |
There's also wrap-reverse.
Which is kind of nice.
| | 01:57 |
So if you do that, I'll save this and go
back out to the browser.
| | 02:01 |
You can see that now it's starting with
five, six and seven and then it goes one,
| | 02:04 |
two, three and four.
Now that may not have been what you are expecting.
| | 02:09 |
You may have been expecting seven to
start, but what it's really doing is
| | 02:12 |
remember it's reversing the lines
themselves.
| | 02:15 |
So whereas this one used to be the top
line, now this one is the top line.
| | 02:19 |
So it's not reordering the elements, it's
reordering the flex lines.
| | 02:23 |
Now if this seems like really convoluted
syntax to you, or you feel like you're
| | 02:27 |
doing things twice, you kind of are.
So what's really nice is that flex
| | 02:31 |
direction and flex wrap can be shorthand
into a single property.
| | 02:36 |
So I'm going to get rid of all the flex
wraps.
| | 02:38 |
And I'm going to change flex direction to
flex flow.
| | 02:43 |
So I'm going to change each of these
directions to flow.
| | 02:45 |
And that allows me to do both the row or
the column declaration and the wrap declaration.
| | 02:52 |
So now I can say wrap, I can say row and
then a space, and then wrap.
| | 02:57 |
And this shorthand declaration allows me
to save a little bit of time.
| | 03:00 |
Now if I go out to my browser, you can see
that I'm still getting the row and I'm
| | 03:03 |
still getting the wrap, because it's
appearing on multiple lines.
| | 03:08 |
Now wrap is not a default behavior, so
you'll have to remember to set flex-flow
| | 03:12 |
to wrap for any flex container that has
the possibility of overflow if you want to
| | 03:16 |
keep overflow from happening.
Obviously you won't need this for every
| | 03:22 |
single flex container, but it's a good
thing to keep in mind as you start to plan
| | 03:25 |
your layouts.
| | 03:27 |
| | Collapse this transcript |
| Challenge overview| 00:00 |
At the end of each chapter I'm going to
give you a challenge that will allow you
| | 00:03 |
to test what you've learned against a real
world application.
| | 00:07 |
You know, in most flexbox demos and
examples that you'll see, you're going to
| | 00:10 |
see exactly what you've seen so far in
this course which is just simple boxes
| | 00:14 |
arranged in a row or a column.
Well, that would be great if all you
| | 00:19 |
designed were pages with multiple boxes on
them, but I'm guessing that doesn't
| | 00:22 |
accurately describe many of your web
projects.
| | 00:26 |
So for the challenges I decided to
replicate a common project which is a
| | 00:30 |
simple blog design.
So here I have the index file opened up
| | 00:33 |
from 01_07 which is our first challenge,
but this is just a review of what you'll
| | 00:37 |
be working on in your challenges.
I just want to point out a few really
| | 00:42 |
interesting features about this blog and
this layout.
| | 00:45 |
First things first, there is not a single
float or positioned element in this entire
| | 00:50 |
blog layout.
This is all, every bit of the layout's
| | 00:53 |
being controlled through the use of
flexbox.
| | 00:56 |
We have some kind of interesting things
going on.
| | 00:58 |
For example up in the menu you'll notice
that this line which says generic
| | 01:02 |
interests which I don't think I would ever
have a nav element broken on separate
| | 01:05 |
lines but I did it for a reason because
we're centering these vertically inside
| | 01:09 |
the navigation bar.
Now that's not that big of deal unless you
| | 01:14 |
have some of your elements which are on a
single line and some which are on double
| | 01:18 |
lines in which it becomes a very big deal.
I also want to make this amount of space
| | 01:23 |
in between the search element and these
guys flexible.
| | 01:26 |
I'm using baseline alignment down here to
align this heading and this heading with
| | 01:29 |
each other without having to do anything
really odd.
| | 01:33 |
And one of the things that you'll notice
is if I scroll through, all of these
| | 01:36 |
elements are exactly the same height even
though their content isn't the same height.
| | 01:41 |
So flexbox is allowing us to do that.
We have our footer content that's centered
| | 01:45 |
both horizontally and vertically.
We have these elements that are exactly
| | 01:48 |
the same size.
And flexbox is controlling that.
| | 01:52 |
And we have a two-column layout that
flexbox is not only controlling.
| | 01:56 |
But you'll notice as we start going down
to a smaller size.
| | 02:00 |
Not as only, only is everything responsive
when we get down to a real small size,
| | 02:04 |
things change in a very dramatic way.
For example, source order changes.
| | 02:10 |
The elements that were towards the bottom
come up towards the top.
| | 02:14 |
Our article then follows that and then if
I go down you'll notice that the
| | 02:17 |
navigation is at the very bottom of the
page.
| | 02:20 |
And, notice that the search field is
actually on top of the navigation whereas
| | 02:23 |
in a larger view, the search comes after
it.
| | 02:27 |
So flexbox is not only allowing us to
handle orientation, and alignment and
| | 02:31 |
sizing of the elements, it's also allowing
us to handle source order as well and
| | 02:35 |
those are all things that you're going to
work on in your challenges.
| | 02:40 |
Feel free to open up the finished file in
your code editor and check out how flexbox
| | 02:43 |
is being used.
However, since I'm going to have you try
| | 02:47 |
to figure out how to do most of this a
little later on, you might want to wait
| | 02:50 |
until the end to really dive in and
explore the code.
| | 02:54 |
| | Collapse this transcript |
|
|
2. Element FlexibilityUnderstanding the flex property| 00:00 |
One of the main properties you can control
through flexbox is the flexibility of flex items.
| | 00:06 |
I mean, flex is actually part of the name,
so you know it's pretty central to how
| | 00:10 |
flexbox works.
In this chapter we're going to discuss how
| | 00:14 |
to control element flexibility.
Because the flex property can be a bit
| | 00:19 |
hard to understand at first, I want to go
over the property syntax and its options
| | 00:22 |
before we jump into using it.
The flex property is actually short hand
| | 00:28 |
for three individual flex box properties,
flex grow, flex shrink and flex basis.
| | 00:36 |
Together, these three properties tell user
agents how big an element is, how it
| | 00:40 |
should be sized relative to other flex
items and how the element should react
| | 00:43 |
when the size of its container changes.
First, let's take a look at flex grow.
| | 00:50 |
Flex grow is expressed using a number and
it's used to determine how much a flex
| | 00:54 |
item will grow relative to the rest of the
flex items inside the container.
| | 01:00 |
If every flex item has a flex grow of one
for example, each item would be the same size.
| | 01:06 |
If flex grow is not defined for an item,
it defaults to one.
| | 01:11 |
Flex shrink is also expressed using a
number, and it determines how much a flex
| | 01:15 |
item will shrink relative to other flex
items inside the container.
| | 01:20 |
As with flex grow, it defaults to one if
you leave it off.
| | 01:24 |
Flex basis is a little bit more
complicated.
| | 01:28 |
You can set flex basis using the same
values you would use for an element's width.
| | 01:32 |
So, values in pixels, percentages, or any
length as well as the key word auto.
| | 01:37 |
This value is then used as the initial,
main size, of an element.
| | 01:42 |
Before any remaining free space has been
distributed.
| | 01:45 |
If you leave it off, the initial value is
assumed to be zero.
| | 01:50 |
In most cases, you won't be setting all
three values.
| | 01:53 |
Usually, I see either a single flex grow
value or a combination of flex grow and
| | 01:57 |
flex basis.
If you want a list of common values and
| | 02:01 |
how they affect an item's flexibility,
check out the section on the flex property
| | 02:05 |
in the W3C flexbox specification.
Like most things, it's actually a little
| | 02:11 |
easier to understand once you see it in
action, so we're going to work with the
| | 02:14 |
flex property in our next exercise.
| | 02:17 |
| | Collapse this transcript |
| Controlling element flexibility| 00:00 |
Perhaps the most confusing of flex box is
really understanding how to control the
| | 00:04 |
flexbility of flex items within their
containers, so in this exercise we're
| | 00:08 |
going to explore the options you have for
defining flexibility and what each of
| | 00:12 |
those options mean.
So I have flexiblility.htm I'll put out
| | 00:18 |
from 02_02.
And just to give you an idea of things
| | 00:22 |
that change just a little bit down here in
the structure.
| | 00:25 |
We still have our section with class of
flex container.
| | 00:27 |
This time we have four boxes inside of it,
but notice that those four boxes have
| | 00:31 |
classes applied to them.
Three of them have a class of flex one.
| | 00:35 |
The third one has a class of flex two, and
when we talk about sizing these
| | 00:38 |
differently that's going to come into play
and be very, very important.
| | 00:43 |
So I'm just going to write a couple of
selectors.
| | 00:45 |
Again, I'm going to paste these in really
quickly so you don't have to watch me type
| | 00:48 |
them, and then just go ahead and pause
your video and type in these same values.
| | 00:52 |
While you're doing that I'm going to go
ahead and explain what these values are.
| | 00:56 |
You'll notice that I wrote a selector for
the flex one class and the flex two class.
| | 01:00 |
And right now their values are exactly the
same even though we've used prefixes, the
| | 01:04 |
only thing I want you to focus on are
these three values.
| | 01:08 |
So flex is the short hand notation for
flex grow flex shrink and flex basis so
| | 01:11 |
you can just do flex short hand.
When you do that short hand the first
| | 01:17 |
value is flex grow, the second value is
flex shrink, and the third value is flex basis.
| | 01:23 |
So essentially what we're saying here, is
we're saying for each of these elements
| | 01:27 |
all the one's with the class of flex one
and the one with flex two, their flex grow
| | 01:30 |
and flex shrink should be one and their
flex basis, meaning their starting size,
| | 01:34 |
should be 100 pixels.
So, if I save this and go to my browser
| | 01:39 |
and preview this page you can see that
each of these elements is exactly the same size.
| | 01:45 |
Now, are they really 100 pixels?
Well, no, because I can flex them.
| | 01:48 |
That's the whole nature of flexbox.
What flex basis does for us is it doesn't
| | 01:53 |
define a size, a specific size, unless
flex grow and flex shrink are zero.
| | 01:59 |
It doesn't define a flex size for us the
same way width does.
| | 02:01 |
What it does is it decides the starting
point for the element.
| | 02:05 |
Now there's some default values for flex
basis that really matters.
| | 02:08 |
And I want to flip over to the
specification to kind of show you what I'm
| | 02:11 |
talking about.
Alright, so here I am in the flex box
| | 02:14 |
specification, again you can go to w3.org,
and search for the flex box specification
| | 02:18 |
and you'll find this.
And I'm looking specifically at the flex
| | 02:23 |
property and I've scrolled down a little
bit because I want to focus on this
| | 02:25 |
graphic right here.
If you don't give flex basis a definition
| | 02:29 |
it defaults to zero.
It also accepts the keyword of auto, and
| | 02:32 |
understanding how those two things differ
is very, very important.
| | 02:37 |
So what flex basis does again, it defines
sort of the starting point for the object,
| | 02:41 |
and then the size of the object is
determined by the content and the amount
| | 02:44 |
of space available to distribute between
all of the objects.
| | 02:50 |
If we have a flex basis of zero, notice
that the size of the artwork, or the size
| | 02:54 |
of the elements is determined by both the
content and the available extra space.
| | 03:00 |
If, on the other hand, we say a flex basis
of auto, then content is ignored for the
| | 03:04 |
size of the element, and the size of the
element is controlled by the amount of
| | 03:08 |
available extra space.
You can see here, this one is using twice
| | 03:13 |
the available space, this one is using
one.
| | 03:15 |
These are the values of flex grow.
So your flex basis defaulting to zero and
| | 03:20 |
giving your flex basis a keyword value of
auto is a very, very big difference.
| | 03:26 |
So let's go try that for ourselves.
Alright.
| | 03:29 |
So I'm back in my flexibility.htm.
And what I'm going to do is I'm going to
| | 03:33 |
change some things up a little bit.
In the flex two selector, I'm going to
| | 03:37 |
change flex grow to two.
So essentially, I'm saying I want the
| | 03:42 |
element that has a flex two class to be
twice the size of the flex one elements.
| | 03:47 |
Again, if I save this and go back out to
the browser, you can see that the third
| | 03:51 |
element which has that class of flex two,
is now twice the size of these other elements.
| | 03:58 |
Well, lets see what changing the flex
basis does for us in terms of size.
| | 04:02 |
So now I'm going to go ahead and apply a
flex basis of zero to each of those selectors.
| | 04:14 |
Saving this and going out to the browser,
you can see a slight difference from what
| | 04:17 |
we had before.
Rather than starting at 100 pixels and
| | 04:21 |
then distributing the extra space, it now
lets the content of the elements, plus the
| | 04:25 |
extra space define the size.
If, if I change the value of the element
| | 04:30 |
down here to three longer just to make the
width of the element longer.
| | 04:36 |
If I save this, and go back out, and I'm
going to change this from a flex basis of
| | 04:40 |
zero to auto so you can see the
difference.
| | 04:44 |
Alright, so if I save this and go back out
to my browser, this is the same file with
| | 04:49 |
flex basis set to auto, which means that
the content is ignored and it's the space
| | 04:54 |
that's distributed.
This is flex basis of zero in which the
| | 05:00 |
content and the space are equally
distributed.
| | 05:04 |
And you can see, there is a distinct
difference between the width of the
| | 05:07 |
elements based upon where we start with
flex basis.
| | 05:12 |
Keep in mind, that this view, right here,
where flex basis is at zero, this is the
| | 05:15 |
default, where this is auto and this is a
keyword that I actually have to specify.
| | 05:20 |
So if I don't specify anything for flex
basis, this is the valuation I get if I
| | 05:24 |
specify a specific value or the specific
keyword of auto I'm going to get a result
| | 05:28 |
more like this.
It seems like you're splitting hairs, but
| | 05:33 |
there is a big difference between them.
Alright, so you'll notice that we haven't
| | 05:37 |
really seen flex shrink in action and you
have to really actually do a lot to get
| | 05:40 |
flex shrink to work.
You actually have to make sure the
| | 05:43 |
container is shrinking, the available
space is going away as well.
| | 05:46 |
And then it's actually something that
you're not going to encounter a lot.
| | 05:50 |
If you don't specifically need a different
value for flex basis then there's really
| | 05:53 |
no reason to declare it at all because it
will default to zero, and most people
| | 05:57 |
that's what they actually want.
So, most of the time when you see the
| | 06:02 |
value of flex specified, you're going to
see it look just like this.
| | 06:07 |
You're just going to see one single value.
If you see that one single value, what
| | 06:12 |
this is going to be interpreted as, flex
grow is going to be the value that's
| | 06:16 |
passed, flex shrink will default to one
and then flex basis will default to zero.
| | 06:23 |
So, now, if I save this and go back out,
you'll notice it has exactly the same
| | 06:27 |
results as earlier when we'd explicitly
defined flex basis as being zero.
| | 06:33 |
That means that you'll more than likely
see this shorthand notation whenever
| | 06:36 |
somebody is defining flex value.
For example, if we go to three on flex two
| | 06:41 |
and save that, on our browser you'll
notice that three is now hree times the
| | 06:45 |
size of one, two and four.
So that's how you're going to see it most
| | 06:50 |
of the time, with a single value.
However, it is important for you to
| | 06:54 |
remember that you can also control how
elements are sized by using the flex
| | 06:57 |
shrink and the flex basis value as well.
You won't often find yourself needing
| | 07:02 |
them, but it's nice to know that you do
have that kind of power if you need it.
| | 07:07 |
| | Collapse this transcript |
| Defining display ratios| 00:00 |
Before we move on, I want to dig a little
deeper into the flex property and how to
| | 00:04 |
approach using the values for layout.
Now, personally, I like to think of
| | 00:10 |
defining them for flex items the same way
that you create display ratios.
| | 00:15 |
In a, a manner, very similar to working
with fluid grids.
| | 00:19 |
So I have the ratios.htm file open from
the 02_03 directory and if I just take a
| | 00:22 |
look at this in my browser you can see we
have three elements, one, two and three,
| | 00:26 |
and they're not being sized any way at all
right now.
| | 00:32 |
Well, actually they kind of are but
they're just, they're default size.
| | 00:35 |
So, if I look in the code I can see that I
have three boxes and each of them have a
| | 00:39 |
separate class, flex one, flex two and
flex three.
| | 00:44 |
Handily enough I have selectors already
prepared for you with the flex property itself.
| | 00:49 |
So we've already kind of got a head start
here if you will.
| | 00:53 |
Okay, now for those of you that have ever
used say a grid layout system or a fluid
| | 00:56 |
grid layout, it doesn't really matter.
You know that in those systems you define
| | 01:02 |
layouts by thinking in terms of a column
layout.
| | 01:07 |
So, so let's say your page has 12 columns,
okay?
| | 01:11 |
You would say if you want to define an
element width you would tell one element,
| | 01:13 |
okay, I want you to be three columns wide.
And then you could tell another element,
| | 01:17 |
okay, I want you to be six columns wide.
And then you could tell another element,
| | 01:20 |
and I want you to be three columns wide
and that'll give you a three column layout
| | 01:24 |
with the middle column twice the size of
the other two.
| | 01:27 |
So it's very common and most people uses
classes so they would do three col or six
| | 01:31 |
col or whatever class they would need for
the width and they would use floats to
| | 01:34 |
make things appear side by side.
Well you can use that same approach of
| | 01:39 |
using a grid layout with using flexbox,
and you can think of these ratios in the
| | 01:43 |
same way.
So that example I just gave you, for
| | 01:47 |
example, if I take the flex one and give
it a value of three, and I take flex two
| | 01:51 |
and I give it a value of six, and I take
flex three and I give it a value of three.
| | 01:59 |
It's pretty much the same as saying, okay,
I've got a 12 column layout.
| | 02:03 |
I want flex one and flex three to span
three of those columns and I want flex two
| | 02:06 |
to span six of those columns.
So if I save this and go out to the
| | 02:11 |
browser you can see there's a three column
layout.
| | 02:14 |
And one and three are spanning three
columns.
| | 02:16 |
And two is spanning six.
Now of course, I was an art major and I'm
| | 02:20 |
serious about the fact that I'm not that
good at math.
| | 02:22 |
I'm really not.
But I know that I could simplify this if I
| | 02:25 |
wanted to.
For example, I could bring this ratio down
| | 02:27 |
a little bit.
I could make them one, and then two and
| | 02:32 |
one and I would get the same exact results
because it's the same ratio.
| | 02:43 |
So if I save this, go back out to my
browser, I can see that I really get the
| | 02:47 |
same exact thing.
The column in the middle is still twice as
| | 02:50 |
large as the ones on the end and I'm
getting the same relationship.
| | 02:55 |
You know, the first time that you start
working with that flex property it can be
| | 02:58 |
a little difficult to wrap your head
around in terms of how you're sizing the elements.
| | 03:03 |
By thinking of these flex values more as
display ratios between the items
| | 03:06 |
themselves you can visualize how those
values are going to result in the final
| | 03:10 |
size of the flex items.
| | 03:13 |
| | Collapse this transcript |
| Challenge: Creating element flexibility| 00:00 |
In our last chapter we took a brief tour
of the generic blog that we're going to be
| | 00:03 |
working on in our challenges.
Now it's time to dig in and get started.
| | 00:09 |
In this challenge, you're going to be
focusing on using the Flex property to
| | 00:12 |
control the sizing of some of our page
elements.
| | 00:16 |
Now I actually have two files open that
we're going to be working with, the
| | 00:20 |
index.html and the flexbox.css files.
You can find these in the 02_04 folder,
| | 00:26 |
and the flexbox.css is going to be found
in the _css folder.
| | 00:31 |
Alright I want to start with the index
just because I want to give you sort of
| | 00:33 |
the lay of the land if you will, the
structure of the page itself.
| | 00:37 |
So inside of our body tag we open with a
nav with the role of navigation, that's
| | 00:42 |
followed by a header with the role of
banner and that is followed by a section
| | 00:46 |
with a class of main.
Now inside the main section that wraps two
| | 00:52 |
elements, the article with class of
featured, and just below that we have an
| | 00:56 |
aside with a class of sidebar.
Inside the sidebar we have several
| | 01:02 |
sections, and finally the aside and main
selection closes out.
| | 01:08 |
Below that we have a section of the class
of spotlight, and inside that are articles
| | 01:12 |
that have the latest news, courses, and
reviews in it.
| | 01:16 |
Below that, we have a footer.
So that's the overall page structure that
| | 01:19 |
you're going to be controlling.
All right.
| | 01:21 |
I'm going to switch over to FlexBox.css
because this not only contains the styles
| | 01:24 |
that you're going to be modifying, but it
also contains detailed instructions for
| | 01:28 |
your challenge.
So I'll go over each of these objectives
| | 01:32 |
step by step.
Right, so first I want you to go out and
| | 01:35 |
explore the structure of both the featured
article and the side bar themselves.
| | 01:40 |
In addition, take a look at their parent
element which is that main element.
| | 01:44 |
Now, using that structure as a guide, you
need to change the featured and side bar
| | 01:48 |
elements to Flex Items.
And then set their Flex properties so that
| | 01:53 |
the featured element is three times the
size of the side bar element.
| | 01:57 |
Eh, as I mentioned here in the exercises,
if it does help you, and you're used to
| | 02:01 |
using grid layouts, think of it this way.
The featured would be taking up nine
| | 02:05 |
columns of a 12 column layout, and the
side bar element would take up three.
| | 02:11 |
Make sure you style that parent main
element so that the featured and sidebar
| | 02:14 |
elements will be flex items, otherwise the
flex property won't work.
| | 02:19 |
Next, find those three articles in the
spotlight section towards the bottom of
| | 02:22 |
the page.
Each of them have a class attribute of latest.
| | 02:27 |
Using the Flex property, make sure that
each of these elements are exactly the
| | 02:30 |
same size.
Now it's worth noting that you should be
| | 02:34 |
able to preform each of those tasks using
the existing selectors.
| | 02:38 |
You shouldn't have to write in any new
ones.
| | 02:39 |
Now at the end of this, I have a little of
a bonus for you.
| | 02:42 |
When you're done, I want you to think
about those things, actually you can think
| | 02:45 |
about them as you work.
You know in the last step, you use that
| | 02:48 |
Flex property to make sure all those
latest articles where the same size.
| | 02:53 |
Did you really need to do this?
The second thing I want you to do is to
| | 02:56 |
examine the styles in the small screen
media query.
| | 03:00 |
If I scroll down through my styles, right
here you can find a media query whose
| | 03:06 |
maximum width is set to 720 pixels.
So look through those styles, look through
| | 03:11 |
those selectors.
And what I want you to focus on is when
| | 03:14 |
the layout switches to that smaller screen
size, that two column layout that we've
| | 03:18 |
created and that you're sizing.
With the featured and the sidebar elements
| | 03:23 |
goes back to a single column.
Yet you are not going to change anything
| | 03:27 |
in terms of their Flex values, okay?
So my question to you is, why does this happen?
| | 03:32 |
Okay, take your time.
Go through each of the steps carefully,
| | 03:37 |
and remember, when you're writing your
properties, you want to use the web kit
| | 03:40 |
and NS vendor prefixes.
As well as the unprefixed properties.
| | 03:45 |
As a matter of fact it's a really good
habit to get into making yourself write
| | 03:48 |
all three of those in terms of the syntax.
Overall, this challenge should take you
| | 03:53 |
around ten minutes.
If you get stuck, feel free to check out
| | 03:56 |
the files in the finished files folder to
see the solution.
| | 04:00 |
Once you've finished be sure also to check
your results against mine in the solutions
| | 04:03 |
movie that follows this one.
| | 04:05 |
| | Collapse this transcript |
| Solution: Creating element flexibility| 00:00 |
Let's take a look at the finished files
from the previous challenge.
| | 00:04 |
I'm going to go through the code and
explain the styles that I wrote to control
| | 00:07 |
element flexibility and you can compare
your results with mine.
| | 00:11 |
So, I have index.htm and the flexbox.css
files open from the 02_04 finished files folder.
| | 00:20 |
Okay, so lets talk about each of the steps
individually and take a look at the
| | 00:23 |
solution that I came up with.
So the first step was to take a look at
| | 00:27 |
the structure of the featured inside bar
articles.
| | 00:30 |
Make them flex items.
And then make it so that the featured
| | 00:33 |
article is three times the size of the
side bar element.
| | 00:36 |
Alright so let's take a look at how I did
that.
| | 00:38 |
If I scroll down into my styles.
I can go into the Layout Styles and I
| | 00:42 |
want to start right here on bout line 56
or 57 right there for the main content styles.
| | 00:47 |
So, one of things that a lot of people
overlook is right here for section.main.
| | 00:52 |
In order to use the flex property on the
feature in the sidebar, they have to be
| | 00:56 |
flex items.
In order for them to be flex items they
| | 01:00 |
have to be inside of a flex container,
that is Flex Box 101.
| | 01:04 |
You can not have a flex item unless you
have a flex container.
| | 01:07 |
So, unless you guys wrote these properties
right here in the section main for display
| | 01:12 |
of flex then using the flex value isn't
going to work.
| | 01:17 |
The next thing I did, I went down to both
the featured and the side bar selector and
| | 01:21 |
I gave them different flex values.
Now I used a flex value of three for
| | 01:26 |
featured and a flex value of one for side
bar.
| | 01:29 |
So that gives me a ratio of three times
the size of the side bar.
| | 01:33 |
If you used a different ratio, for
example, if you did like a flex value of 9
| | 01:36 |
for featured and 3 for side bar, that
still is going to work just fine.
| | 01:42 |
As long as the ratio is the same.
So, if you really like that analogy of
| | 01:46 |
using a grid layout, and you're using
those values.
| | 01:49 |
There's really nothing wrong with that
other than the fact that somebody else
| | 01:52 |
might have a hard time understanding it.
Som I would recommend that even if you
| | 01:56 |
like that, and you start out with that, go
ahead and start reducing those down to
| | 01:59 |
their lowest values, so that you end up
with the lowest ratio possible.
| | 02:04 |
Now the next thing I asked you to do.
And I'm going to go back up to my steps here.
| | 02:09 |
Is to find those 3 articles in the
Spotlight section with the class of latest.
| | 02:12 |
And then use the flex property to ensure
that each of those elements are exactly
| | 02:15 |
the same size.
So again if I go down in my styles, I can
| | 02:19 |
find the class selector for latest.
You can see that for each one of those, I
| | 02:23 |
use a flex value of 1.
Now, it's worth pointing out that the
| | 02:26 |
parent element, in this case spotlight,
has a display property of flex.
| | 02:30 |
If it didn't, these wouldn't work.
Now, I went ahead and did a 1 explicitly.
| | 02:35 |
Did I really need to do that?
Actually no.
| | 02:38 |
If you have 3 elements that are flex items
inside of a flex container and you don't
| | 02:42 |
specify, they're going to have a default
value of 1.
| | 02:47 |
However, I do want to point out the fact
that there's so many differences in implementations.
| | 02:52 |
And there are still implementations coming
online.
| | 02:55 |
If you explicitly want them all the same
size.
| | 02:58 |
My recommendation is to go ahead and
define that.
| | 03:02 |
The last bonus question that I asked you
was once we go down to a smaller screen
| | 03:05 |
size, and let me just display that in the
browser.
| | 03:08 |
Once I go down to a smaller screen size,
you'll notice that the two column layout.
| | 03:14 |
Becomes a single column layout.
And my question to you.
| | 03:17 |
Why the flex values that you used here, a
3 and a 1, why aren't those values
| | 03:21 |
reflected or why aren't they causing
problems at that single-column layout?
| | 03:27 |
Well, that has everything to do with what
we do to the parent container of those
| | 03:30 |
elements when we go to a smaller screen.
For example, when I go down to the small
| | 03:35 |
screen styles, when I go down to the
actual section styles themselves, you're
| | 03:39 |
going to see that, that main section that
is the parent for both of those.
| | 03:44 |
It's display property is changed to block.
Because it is no longer a Flex Container,
| | 03:49 |
those Flex Properties have absolutely no
effect on it and you don't even need to
| | 03:53 |
strip them out.
So, changing the parent container from a
| | 03:58 |
flex container to a block level item
nullifies the values that you had in the flex.
| | 04:02 |
And that's why you didn't have to
overwrite 'em in the smaller screen styles.
| | 04:06 |
Well, congratulations.
You just finished your first challenge.
| | 04:09 |
Now you might be looking around saying,
Hey, the rest of all of this code is
| | 04:13 |
already done.
Well, that's true, but as the chapters
| | 04:16 |
progress you are going to be working on
each of these topic areas in turn.
| | 04:21 |
So rest assured, you'll be tackling the
rest of it very soon.
| | 04:24 |
| | Collapse this transcript |
|
|
3. Controlling AlignmentMain axis alignment| 00:00 |
In this chapter we're going to be focusing
on using flex box to align elements and
| | 00:04 |
we're going to start with aligning
elements along the main axis using the
| | 00:07 |
justify content property.
Remember, each flex container has two axis.
| | 00:14 |
A main axis and a cross axis.
If the container is a column, the main
| | 00:18 |
axis is going to be vertical.
if it's a row, it's going to be horizontal.
| | 00:22 |
This is one of the reasons that alignment
in Flexbox is so tricky.
| | 00:26 |
You have to remember the direction of the
main axis to know which property to use.
| | 00:31 |
So, I'm going to be working with main.HTM,
which is found in the 03_01 directory.
| | 00:34 |
It's very similar to what we've had
before.
| | 00:37 |
If I preview this in the browser, for
example, you can see that we have our Flex
| | 00:40 |
Container down here that has 4 elements
inside of it.
| | 00:44 |
And here is our flex container selector.
When you're doing main access alignment
| | 00:49 |
inside of a container, you use the justify
content property and you apply that
| | 00:53 |
property to the container itself.
So you're not actually doing this on the
| | 00:57 |
flex items, you're doing it on the
container.
| | 00:59 |
Kind of makes sense, because you're
telling the user agent how to align those
| | 01:02 |
items within the container.
Okay.
| | 01:05 |
So I'm going to go down to the next line
and I want to show you guys the syntax
| | 01:07 |
involved here.
So, I'm just going to paste some code in
| | 01:10 |
to make this a little bit easier and a
little quicker anyway.
| | 01:13 |
And the property we're using is justify
content, but I want to point out the
| | 01:17 |
difference in that Microsoft vendor prefix
because.
| | 01:21 |
Remember it's using that 2011 tweener
syntax.
| | 01:24 |
So whereas WebKit and unprefixed version
are using justify content Microsoft is
| | 01:30 |
going to be using Flex Pack.
Alright?
| | 01:33 |
Notice also the values are a little
different too.
| | 01:36 |
So, Web Kit uses Flex dash Start, whereas
Flex Pack uses Start, and justify content
| | 01:40 |
of course also is using Flex Start.
So what I want to do, I want to take just
| | 01:45 |
a moment.
I'm going to save this.
| | 01:47 |
Go back in the browser and you can see
well, nothing really changes.
| | 01:51 |
It doesn't change because flex start is
kind of the default.
| | 01:54 |
If you leave it alone flex start is how
it's going to align those flex items.
| | 01:58 |
Let's take a look at the values and what
they are going to do for us.
| | 02:01 |
So right now I'm in the css flexible
layout model specification and I've jumped
| | 02:05 |
down to the justify content property.
So here are the values we can specify for
| | 02:10 |
justify content.
We can do flex-start, flex-end, center,
| | 02:13 |
space between, and space around.
Okay, the first three are pretty self-explanatory.
| | 02:19 |
Flex-start, place all of the flex items at
the beginning of the container.
| | 02:22 |
Flex-end, push them to the end.
Any available space is either placed at
| | 02:26 |
the end or the beginning of the container,
based on which of those you used.
| | 02:30 |
Center is also pretty easy.
Along the main axis, just center
| | 02:33 |
everything within the container.
Easy enough.
| | 02:36 |
Space between the space round gets a
little interesting, though.
| | 02:39 |
For a space between, the first flex item
is placed at the beginning of the container.
| | 02:44 |
The last flex item is placed at the end of
the container.
| | 02:47 |
Then, the remaining space is evenly
distributed between the flex items.
| | 02:50 |
Space-around does pretty much the same
thing.
| | 02:53 |
But the amount of space that's being
placed between the items, one of those
| | 02:56 |
values is split in half, and half of it is
placed at the beginning of the flex
| | 03:00 |
container, half of it is placed at the end
of it.
| | 03:04 |
You can sort of see that difference
between space-between and space-around.
| | 03:06 |
Okay, so let's have a little bit of fun
with these properties.
| | 03:11 |
I'm going to go back into my code here,
and I want to change flex-start to center.
| | 03:18 |
And I'm going to do that for all 3 of
these.
| | 03:21 |
So I'm going to go ahead and save that.
Go back inside my browser and you can see
| | 03:27 |
that now those elements are centered
horizontally within that row.
| | 03:31 |
Now, if this was a column we would have
just vertically centered these elements
| | 03:35 |
inside a column without doing anything
other than assigning one property to it
| | 03:38 |
and that is one of the just beautiful
things to me about Flexbox.
| | 03:44 |
Alright, now I want to spend a little bit
more time talking about the difference
| | 03:46 |
between space between and space around so
I'm going to go back into the code.
| | 03:50 |
And I first want to try space-around.
So I'm just going to go ahead and do
| | 03:56 |
space-around for both of the justify
content and the webkit one.
| | 04:00 |
Now, flex-pack doesn't have space between
and space-around, it only has justify.
| | 04:05 |
So, if I save this.
Go back in the browser and test it, you
| | 04:08 |
can see, I'm getting an equal amount of
space between each of these.
| | 04:11 |
But then I have this little bit of extra
amount of space at the beginning and the
| | 04:14 |
end of my flex container, and that's what
space around is doing for us.
| | 04:18 |
It's essentially saying, okay, evenly
space them, but put half of the even space
| | 04:22 |
at the beginning and end.
If we'd said space between, items one and
| | 04:26 |
four would be right up against the edge of
the flex container itself.
| | 04:31 |
And just keep in mind that Internet
Explorer doesn't differentiate between
| | 04:34 |
space between and space around, it only
has the justified value.
| | 04:37 |
Okay, now just to show you how this
differs based upon whether the element is
| | 04:41 |
a row or a column.
Let's go ahead and make a column out of
| | 04:45 |
our flex container.
So I'm going to go down in the same
| | 04:48 |
selector we've been working on.
And I'm going to go ahead and do the flex
| | 04:52 |
flow properties.
I'm going to do webkit flex dash flow.
| | 04:57 |
And I'm going to change that to a column.
Now I'm a firm believer in copying and
| | 05:01 |
pasting because that can really speed you
up.
| | 05:04 |
So I'm going to go ahead and do that.
Twice.
| | 05:08 |
Brackets is doing some interesting things
for me here.
| | 05:10 |
I'm going to change that to ms flex flow
and then get rid of the vendor prefix so
| | 05:13 |
that it just says flex flow.
Now that would be enough but it's not
| | 05:17 |
going to be tall enough for you to
actually see this whole space around.
| | 05:21 |
So I'm also going to come in and give it a
height property of 500 pixels.
| | 05:26 |
So that's just to give us enough vertical
space so that it has room to space those out.
| | 05:30 |
So if I save that, come back in and you'll
notice that now using the space around
| | 05:34 |
that we're doing it's giving us an equal
amount of space between these and then
| | 05:37 |
just a little bit of padding at the top
and at the bottom of it.
| | 05:42 |
And don't forget if we were to do
something like center.
| | 05:46 |
All the way around here, because this is a
column and not a row.
| | 05:50 |
I'm going to save that and go back in the
browser.
| | 05:53 |
You can see we've taken those four items
and we've vertically centered them within
| | 05:56 |
our container by just using one property.
You know, to me, this is one of the most
| | 06:01 |
interesting things about Flexbox.
Since the direction of the main axis can
| | 06:06 |
change, the properties that control
alignment focus on the axis itself, and
| | 06:10 |
not whether it's horizontal or vertical.
| | 06:13 |
| | Collapse this transcript |
| Cross-axis alignment| 00:00 |
In the last exercise, we tackled main axis
alignment.
| | 00:04 |
In this exercise we're going to explore
the align items property and how it allows
| | 00:08 |
us to align flex items along a container's
cross axis.
| | 00:12 |
So I'm going to be working in the
cross.htm file which is found in 03_02.
| | 00:17 |
Now, structurally, this page is about the
same.
| | 00:19 |
We've got four flex item.
Four of these boxes if you will, inside
| | 00:22 |
the flex container.
And the first thing I want to do is just
| | 00:25 |
kind of show you guys the default behavior
for align items.
| | 00:28 |
You can see for example that right now I
don't have flex flow defined, and that
| | 00:31 |
means that our flex container is behaving
as a row.
| | 00:34 |
Well, if I go in and give it, let's say, a
height of around 300 pixels.
| | 00:39 |
All right, lemme save that.
Go out to the browser and now if I check
| | 00:43 |
our flex container and the flex items
inside of it, a very curious thing has
| | 00:47 |
happened here.
Our flex container is much taller, it's
| | 00:51 |
300 pixels tall now, but the items inside
of it are now stretching to fit that height.
| | 00:56 |
So I didn't declare each of them the same
height but they're now stretching so that
| | 00:59 |
they're the equal height of the flex
container.
| | 01:02 |
And remember, the main axis here is
horizontal because currently right now is
| | 01:05 |
a row.
So this is cross axis alignment that we're
| | 01:08 |
looking at.
So that's the default behavior of our flex items.
| | 01:12 |
So let's go back in and take a closer look
at the property that's actually
| | 01:14 |
controlling this.
Okay, so I'm going to paste some code in
| | 01:17 |
here that has our align items property,
feel free to go ahead and pause the video
| | 01:20 |
and type this in.
Okay.
| | 01:23 |
So just some particulars here.
You'll notice that the actual property
| | 01:26 |
value itself is align items.
The webkit prefix uses align items, but
| | 01:30 |
notice that the Microsoft syntax being
that 2011 tweener syntax is actually using
| | 01:34 |
flex align.
And then the values that we're going to
| | 01:38 |
start with here are flex start.
But notice that again in the tweener
| | 01:42 |
syntax it's just start.
So I'm going to save this.
| | 01:44 |
Go out the browser and now you can see
probably what you expected to, to see when
| | 01:48 |
you expanded the height of your container
to 300 pixels.
| | 01:52 |
The items that are in there no longer
stretch, they sit at the start of the
| | 01:56 |
cross axis.
So they're at the very, very top of the element.
| | 02:00 |
Now I want to just for a moment switch
over to the flexbox specification and take
| | 02:04 |
a look at the different values that we can
use for align items.
| | 02:08 |
We've seen flex start, we've seen how that
works.
| | 02:10 |
There's also flex end, center, stretch,
and baseline.
| | 02:14 |
Now, in terms of the Internet Explorer
Microsoft tweener syntax that you'll need
| | 02:18 |
to work with, you have start, end, center,
baseline, and stretch.
| | 02:24 |
So pretty much the same values, but
instead of saying flex start and flex end
| | 02:26 |
it's just start and end.
The rest of them are exactly the same.
| | 02:30 |
So looking at this illustration, some of
these are pretty self explanatory.
| | 02:34 |
Flex start is going to place the elements
at the very top of the elements cross axis.
| | 02:38 |
Flex end is going to put them at the
bottom of the cross axis for the element.
| | 02:42 |
Center is again going to center them.
So we can vertically center elements in a
| | 02:46 |
row using align item center.
And then we have stretch.
| | 02:50 |
Now I think it's very valuable to point
out here that stretch is the default
| | 02:53 |
behavior for cross axis alignment.
And one of the things that this gives us
| | 02:58 |
right out of the box without you having to
do anything is equal height columns.
| | 03:03 |
Think about that for a moment.
You can have a three-column layout, two
| | 03:06 |
sidebars, and a main content in the
middle.
| | 03:08 |
And simply by telling the parent container
for those three elements to be a row, well
| | 03:12 |
those three columns are going to be
exactly the same height.
| | 03:16 |
We can explicitly ask for that using the
stretch property.
| | 03:19 |
But that is the default.
That's what it defaults to.
| | 03:21 |
So that's a really useful behavior.
And of course, if you don't want that then
| | 03:24 |
you can identify that with flex start,
flex end, center, or one of my favorites, baseline.
| | 03:29 |
Now, this one's really interesting.
What baseline does for you is it takes a
| | 03:33 |
look at the top baseline of each of the
flex items and then changes their vertical
| | 03:37 |
alignment, or I should say their cross
axis alignment.
| | 03:41 |
So that the baselines are all aligned.
And as you can see that can have some very
| | 03:45 |
interesting side effects, but one thing
that's really neat about that, is that you
| | 03:48 |
can begin to have columns that have equal
baselines all the way around, so you can
| | 03:52 |
make some pretty interesting baseline
grids with this.
| | 03:56 |
Alright, let's go back into our code and
kind of play around with this for a moment.
| | 04:00 |
Let's change this to flex end, and of
course that will just be end for the
| | 04:05 |
Microsoft one, and we'll do flex end here
as well.
| | 04:10 |
So I'll save that.
Go back out to my browswer and as you can
| | 04:15 |
see now the items are down at the bottom
of that cross axis alignment so they're
| | 04:19 |
moved down to the bottom.
Now we could do baseline but because of
| | 04:23 |
the fact that this text is all the same
size and they all share the same baseline.
| | 04:28 |
It would pretty much look the same way as
flex start does.
| | 04:31 |
Now if we tried center, so if I came in
here and did center for each of these, and
| | 04:35 |
saved it, you can see that it gives us
vertical centering.
| | 04:41 |
Now in this case, we're aligning our items
to the vertical center by using cross axis alignment.
| | 04:46 |
But we always have to keep in mind which
direction a flex container is pointed in.
| | 04:51 |
So if I go back, let's say we modify this
again and we do the flex flow property.
| | 04:58 |
So I'm going to say webkit flex flow.
And let's say that instead of doing a row
| | 05:04 |
we did a column.
And we'll do the same thing for the
| | 05:08 |
Microsoft, flex flow, we'll do column
again.
| | 05:14 |
And then finally we'll just do flex flow
column.
| | 05:18 |
Let's modify the height of this a little
bit.
| | 05:19 |
Let's make it 500 pixels.
Again so we have enough height for
| | 05:22 |
everything to sit in there.
Alright, so I'm going to save this.
| | 05:25 |
So now think for a moment about what this
is going to do for us, try to visualize
| | 05:28 |
what's going to happen here.
We're changing the axis alignment so that
| | 05:32 |
the main axis is now vertical, so the
cross axis is going to be horizontal.
| | 05:37 |
So what's the center value going to do for
us?
| | 05:39 |
Well, f you thought that it was going to
horizontally align it to the center, you
| | 05:42 |
were absolutely correct.
So, you might initially struggle with the
| | 05:46 |
concept of cross axis versus main axis
alignment, but once you get comfortable
| | 05:50 |
with that concept, alignment actually
becomes pretty easy.
| | 05:55 |
And knowing which property to use becomes
pretty easy.
| | 05:57 |
Until that time, however, be sure to make
note of whether the flex container is
| | 06:01 |
either a row or a column.
So that you're going to be prepared to use
| | 06:06 |
the correct alignment property.
| | 06:07 |
| | Collapse this transcript |
| Aligning single items| 00:00 |
In addition to being able to align all of
a flex containers flex items along the
| | 00:04 |
cross axis, Flexbox also allows you to
align a single item along the cross axis.
| | 00:11 |
And you do that with the align self
property.
| | 00:14 |
So I'm in the self.htm file, found in the
0303 directory.
| | 00:19 |
one slight difference in the page
structure.
| | 00:21 |
If I look down here I can see that among
my boxes I have one box, and it's the
| | 00:24 |
third one right here, that has the class
of self applied to it.
| | 00:29 |
So, we're going to take a look at what
align self does for us.
| | 00:32 |
Now, align self and align items are very
similar.
| | 00:36 |
They used exactly the same property, so
you have auto, flex start, flex end,
| | 00:39 |
center, baseline, and stretch.
They give you exactly the same results but
| | 00:43 |
align self allows you to apply that to an
individual flex item, rather than all of
| | 00:46 |
the children of a flex container.
So, it's extremely handy because you can
| | 00:52 |
have all of your flex items, for example,
of say, stretching, and then take one and
| | 00:56 |
put it in the center.
So, it's very, very useful.
| | 01:00 |
Now you'll notice that right now,
currently I've got all of the flex items
| | 01:04 |
in this container aligning to the flex
end.
| | 01:07 |
So if we were to look at that in the
browser.
| | 01:09 |
You can see that each of these items are
just coming down and nesting sort of down
| | 01:13 |
towards the bottom, right against the
bottom edge of the flex container due to
| | 01:16 |
the flex end cross access alignment.
Alright, so what we're going to do is,
| | 01:22 |
we're going to write class selector for
self.
| | 01:24 |
And I'm just going to go ahead and start
on some of these properties.
| | 01:27 |
I'm going to type in dash webkit, dash
align, dash self.
| | 01:35 |
And as I mentioned before, we have auto,
baseline, center, flex end, flex start and stretch.
| | 01:40 |
Let's go ahead and do flex start to start
off with.
| | 01:44 |
So, we're going to do flex start.
For the ms syntax or the tweener syntax,
| | 01:49 |
it's actually instead of a line self, it's
flex, dash item, dash align.
| | 01:55 |
So a little bit more awkward there.
And for this one, again we're just
| | 01:58 |
going to do start.
Remember for the tweener syntax we have
| | 02:00 |
start, end, center, baseline, and stretch.
So the only difference is it doesn't have
| | 02:05 |
the flex dash start and the flex dash end.
Alright, and then finally we'll just do
| | 02:11 |
the non-prefix property, which is align
self.
| | 02:16 |
And here we're just going to do again flex
dash start.
| | 02:21 |
Okay, so, I'm going to save this.
Go back out to the browser and you can see
| | 02:25 |
that 3rd element that has a class applied
to is now up at the top of the parent
| | 02:29 |
container because it, its cross axis
alignment is flex start while the rest of
| | 02:33 |
the flex items are flex end.
That's extremely handy.
| | 02:39 |
If I wanted to vertically center this, for
example, I'll just change this property to
| | 02:43 |
center, on each of these.
Save that.
| | 02:50 |
And you can see number 3 is now vertically
aligned to the center.
| | 02:54 |
Now one thing that I do think is important
to point out is that if you set it, if you
| | 02:57 |
set align self to auto, which is
essentially the same as not defining it at all.
| | 03:02 |
What it looks for first, and let me say
this and, and go over to the browser.
| | 03:06 |
What it looks for first is what the align
items property is for the parent container.
| | 03:11 |
If it doesn't find one of those it does
the same thing that align items does and
| | 03:15 |
defaults to stretch.
So you can see it's picking up flex end
| | 03:18 |
because the flex container is set to flex
end, so that's one of the things you have
| | 03:21 |
to be aware of.
A lot of times you might set it to auto
| | 03:25 |
just anticipating that it would stretch,
because that's what align items does.
| | 03:30 |
But align self first looks to the parent
container and says what is your align
| | 03:33 |
items property, whatever that is, I want
that.
| | 03:36 |
And if it doesn't see one defined, then it
becomes stretch, so if you want it to
| | 03:39 |
default the stretch, remember to go ahead
and define it as stretch.
| | 03:45 |
Don't just assume that auto is going to be
stretched the way it is with align items.
| | 03:49 |
Alright, so I'm going to save that and you
can see now 3 is stretching.
| | 03:54 |
So, there you have it.
I think you'll agree with me that align
| | 03:56 |
self gives you a tremendous amount of
flexibility when aligning items with Flexbox.
| | 04:00 |
There's one more thing that I really want
you to keep in mind.
| | 04:02 |
Unlike justified content, or line items,
the align self property needs to be
| | 04:06 |
applied to the flex items themselves and
not to the parent flex container.
| | 04:12 |
That's a very important distinction to
remember when you're wanting to align
| | 04:15 |
those single items.
| | 04:16 |
| | Collapse this transcript |
| Flex item margins| 00:00 |
Although aligning flex items is pretty
straightforward, one of the things that
| | 00:04 |
you're going to need to pay close
attention to are the margins of your flex items.
| | 00:09 |
Unlike block level elements, flex item
margins do not collapse and margins are
| | 00:13 |
used when calculating the final element
size.
| | 00:18 |
So let's take a closer look at how margins
affect flex items.
| | 00:22 |
So I'm working with margins dot htm file
found in the zero three, zero four
| | 00:24 |
directory and I just want to point out a
little something about the structure here
| | 00:27 |
before we get started.
You'll notice here that we have four boxes
| | 00:32 |
again, the two of them have extra classes.
We have flex one and we have right.
| | 00:38 |
Currently, if we look at kind of where
we're starting out, justify content has
| | 00:41 |
been set to flex start.
We haven't defined a flow so we know this
| | 00:45 |
is going to be a row and height is 400
pixels, and if we take a look at this in a
| | 00:48 |
browser, I'm sure we're seeing what you
sort of expected to see.
| | 00:53 |
Our flex container is pretty tall.
It's about 400 pixels tall or so.
| | 00:58 |
We have the elements are set to flex start
so their going to be on the left hand side
| | 01:01 |
where the main axis starts at and they're
not spaced in any way whatsoever.
| | 01:06 |
Now what happens if we add a margin to
them?
| | 01:08 |
So I'm going to go back into my code and
I'm just going to select a new selector
| | 01:13 |
for the box class, so we're going to do
the entire Box class here with this one.
| | 01:20 |
And I'm just going to apply a very simple
margin here.
| | 01:23 |
And I'm going to do a margin of 20 pixels.
So we're just go ahead and do 20 pixels
| | 01:29 |
all the way a round.
All right, I'm going to save this.
| | 01:32 |
And we're going to go back to the browser
and you can see what the 20 pixels is
| | 01:35 |
doing for us.
It's pushing a margin all the way around.
| | 01:40 |
Check out the margins side by side.
We're getting double spacing there because
| | 01:43 |
the margins are touching each other and of
course, horizontal margins don't typically
| | 01:47 |
collapse anyway, so you'd sort of expect
that.
| | 01:50 |
But what's really interesting about
margins and flex Items is that they don't
| | 01:53 |
collapse vertically either.
So I'm going to go back in, and really
| | 01:57 |
quickly I'm just going to modify the Flex
Container Selector.
| | 02:01 |
Again just pause your video for a moment
and all I'm doing to set flex flow to
| | 02:04 |
columns so this is something we've done
before.
| | 02:07 |
So I'm using web kit flex flow MS flex
flow and then just flex flow so I'm
| | 02:11 |
changing the orientation of column I'm
also going to change the height to around
| | 02:15 |
600 pixels and save that.
So now when I go back to my browser.
| | 02:21 |
I can see that indeed these elements are
stacking one on top of each other
| | 02:24 |
vertically because we've changed the
orientation to the column.
| | 02:28 |
But what's really interesting is these
vertical margins.
| | 02:30 |
Notice that we're getting 40 pixels worth
of space between them.
| | 02:33 |
So these margins are not collapsing at
all.
| | 02:35 |
So that's the first thing that I want you
to understand about how margins work with
| | 02:39 |
flex Items is that the do not collapse
vertically, unlike regular block level elements.
| | 02:45 |
Now the other thing that I want to focus
on is how margins affect both alignment
| | 02:48 |
when you're using certain properties, and
the size of the elements themselves.
| | 02:53 |
When you start using the Flex Property and
margins together the margins are actually
| | 02:57 |
used to calculate the size of the element.
They're included in it, if you will.
| | 03:01 |
On the other hand, when we start doing
alignments, specifically alignment along
| | 03:05 |
the main across axis.
There are certain values that ignore
| | 03:08 |
margins altogether, and you have to know
how this works.
| | 03:11 |
So that when you are combining these
properties together, you get the expected results.
| | 03:17 |
Alright, so what I'm going to do, is I'm
going to take the height back to 400
| | 03:19 |
pixels, and I'm going to get rid of the
flex flow just to go ahead and return it
| | 03:22 |
to being a row.
So, I'm sort of moving us back to more or
| | 03:26 |
less, where we started.
The next thing I'm going to do, is I'm
| | 03:29 |
going to change the justify content.
I'm going to change that from flex start
| | 03:34 |
to space around.
So I'm going to do space around.
| | 03:38 |
Now remember, there is no space around for
flexpack, so that is justify.
| | 03:42 |
And we're going to do space around here as
well.
| | 03:45 |
All right, now I'm going to keep the
margin at 20 pixels.
| | 03:49 |
I'm going to go ahead and save this, go
out to the browser.
| | 03:53 |
And you can see what space around does for
us.
| | 03:55 |
Space around, remember, space is the
element sorts flex items evenly and then
| | 03:59 |
it takes the same amount of space its
using between these, cuts it in half and
| | 04:02 |
places it to the left and to the right of
the beginning and ending flex item within
| | 04:06 |
that container.
So, what exactly is going on with our
| | 04:11 |
margins here?
How are they affecting this particular alignment?
| | 04:15 |
Well if we go in, let's go ahead and
comment our margin out, and find out.
| | 04:20 |
So I'm just going to go ahead and add, add
a little comment to the margin property here.
| | 04:23 |
Save that, go have to the browser, and as
you can see, the only affect that it had
| | 04:26 |
was that it got rid of the margins on top
of the elements themselves.
| | 04:32 |
The alignment that's happening here along
the main axis is not affected at all.
| | 04:36 |
So space around ignores margins when it's
calculating the amount of space to use and
| | 04:39 |
I think it's important to point the space
between does as well.
| | 04:43 |
So both of those alignment options are
going to totally ignore any margin values
| | 04:46 |
that you're going to have.
All right, but what about when we start
| | 04:49 |
sizing elements.
So I'm going to go back in to my code editor.
| | 04:55 |
And what I'm going to do is go into the
box selector here and I'm going to go
| | 04:58 |
ahead and give it a flex value.
So I'm going to do webkit-flex and let's
| | 05:02 |
go ahead give that a flex value of one.
And we're going to do .msflex.
| | 05:05 |
We're going to give it a value of one.
And then finally we're just going to do
| | 05:15 |
the unprefixed flex value of one, now
that's going to cover all of our boxes.
| | 05:20 |
But you'll notice that we have this class
right here of flex one.
| | 05:24 |
I hope I don't confuse you by doing a
different value for flex one but I think
| | 05:26 |
you'll get the idea.
Right so I'm going to write the selector
| | 05:30 |
for flex one and inside that selector what
I'm going to do here is we're going to do
| | 05:35 |
another flex value.
So again I'm going to do webkit-flex and
| | 05:41 |
for this one we're going to give it a
value of three.
| | 05:46 |
And we'll do the same thing here.
Ms-flex three and finally the unprefixed
| | 05:52 |
flex version of three.
Alright I'm going to go ahead and save this.
| | 05:59 |
Go back out to my browser, and you can see
one of the things that happens, right now
| | 06:03 |
we're combining the sizing of these
elements with space around.
| | 06:08 |
Now space around, remember, takes the
available space and splits it up.
| | 06:12 |
When you use a flex property to size
elements, there is no more available space.
| | 06:16 |
Flex takes up all the room.
So if you're trying to combine the flex
| | 06:19 |
property to size your elements in space
around to get even spacing between them,
| | 06:22 |
that's not going to work for you.
Okay, so, it's one of those things that
| | 06:27 |
you need to understand how those things
are combining together.
| | 06:30 |
Now, on the other hand, if we go back into
our box property and let's say we
| | 06:33 |
uncomment out that margin property.
Let's just do that.
| | 06:39 |
If I save this and now go back into my
browswer now notice that we're actually
| | 06:42 |
getting something very similiar to what
space around would give us.
| | 06:47 |
And the reason we're getting that again is
because margins don't collapse so what
| | 06:50 |
we're looking is 20 pixels on the left
hand side 20 pixels on the right hand side.
| | 06:55 |
And then we're looking at 40 pixels in the
middle.
| | 06:57 |
So one of the things that's nice about
this is that when you use the flex
| | 07:00 |
property to size elements the margins will
be calculated right along with that.
| | 07:05 |
Okay, so there is one last thing that I
wanted to show you about margins and flex boxes.
| | 07:11 |
So what I'm going to do is I'm going to
get rid of this flex one selector all together.
| | 07:15 |
So I'm going to get rid of that, and I'm a
get rid of this other Flex Values.
| | 07:19 |
And I'm going to change space around, I'm
going to change that back to Flex Start,
| | 07:23 |
so Flex Start.
And remember for the tweener syntax that's
| | 07:26 |
simply Start.
And I'm going to do the same thing for the
| | 07:30 |
unprefixed version Flex start okay.
I like kind of getting in the habit of
| | 07:34 |
doing all three of those you just get so
used to doing it and when we finally start
| | 07:37 |
doing this in a production manner that's
the syntax we're going to need to use.
| | 07:42 |
Alright so remember we do have this box
right down here with the class of right
| | 07:46 |
applied to it.
So, what I'm going to do is go down here
| | 07:49 |
and create a selector for right.
And inside right, what I'm going to do is
| | 07:53 |
I'm going to do a margin-left.
So, I want to apply a margin to the left
| | 07:57 |
and I'm going to give it a margin-left of
auto.
| | 07:59 |
So, margin-left of auto.
Now, auto margins and flex items are very interesting.
| | 08:04 |
I'm going to save this.
Go back after the browser and check out
| | 08:07 |
what is doing for us.
So, in flex items one, two, and three
| | 08:10 |
we're getting 20 pixels over here on the
left hand side, 40 pixels between these
| | 08:14 |
two, and the right element is also giving
us our 20 pixels on the side, but what's
| | 08:17 |
really neat is the way it calculates auto
margin.
| | 08:21 |
It basically just says how much available
space do I have.
| | 08:25 |
Between this item and this item.
Go ahead and give me this, so it's just
| | 08:29 |
going to push it all the way over.
That's really really neat for menus and
| | 08:32 |
things like that.
Where you have say you have a menu
| | 08:35 |
structure where you have four or five
elements on the left hand side of the
| | 08:37 |
menu, but you want to put something all
the way to the right hand side.
| | 08:41 |
That auto margin works perfectly for that.
So that's another thing you can take
| | 08:46 |
advantage of with flex items, is how auto
margins are interpreted.
| | 08:49 |
They basically say how much available
space do I have.
| | 08:52 |
Okay, give me that, and push eveything
else over on the side.
| | 08:54 |
Well I know that's a lot about margin and
I hope I haven't made margins seem more
| | 08:58 |
confusing than they actually are.
You know for the most part margins
| | 09:03 |
functions exactly the same way they do
with block level elements, except for the
| | 09:06 |
fact that vertical margins don't collapse.
A very important thing to remember.
| | 09:11 |
And you're auto margins can be used to
distribute free space.
| | 09:15 |
Just be really careful when using margins
with flex items and be sure to account for
| | 09:19 |
them when controlling the sizing and the
spacing of your elements.
| | 09:23 |
| | Collapse this transcript |
| Aligning multiple lines| 00:00 |
Most of the time, you're going to be
controlling flex items in a single
| | 00:03 |
direction, or along a single axis.
However, there are many times when flex
| | 00:08 |
items can actually wrap to multiple lines.
When that happens, you can control cross X
| | 00:14 |
alignment of those lines with the
align-content property.
| | 00:19 |
(LAUGH) Let me say that again.
So the align-content property allows us to
| | 00:22 |
control alignment of those multiple lines
that you get.
| | 00:27 |
When you tell flex container to wrap, so
you can see we've got a couple things
| | 00:30 |
going on here.
Structurally, we have a lot more boxes,
| | 00:33 |
you can see we have about nine of them.
And if we go into the flex container
| | 00:37 |
property itself, it's set to row.
And notice that the wrap property is set
| | 00:42 |
to wrap.
So now we're going to have a multi-line,
| | 00:44 |
meaning if the flex items don't fit within
the container, they'll wrap to another line.
| | 00:49 |
Notice that we've also got justify-content
already turned on.
| | 00:52 |
Remember justify-content aligns along the
main axis.
| | 00:55 |
So what this is doing is space-around.
So what we would expect to see in the
| | 00:59 |
browser at this point is we would expect
to see multiple lines of those boxes,
| | 01:02 |
since they're probably not going to fit
into our flex container.
| | 01:07 |
And because of space-around, we're going
to see them evenly spaced, with a little
| | 01:10 |
bit of extra space at the beginning and
the end.
| | 01:14 |
Of the flex container.
Now I should point if your working along
| | 01:17 |
with me here this is the multiple.htm file
in the 03 05 so lets go check this out in
| | 01:22 |
the browser first and indeed if I scroll
down you can see exactly sort of what we
| | 01:26 |
were expecting here.
We're getting equal amount space between
| | 01:31 |
the elements we're getting.
Half that value on the left and right side
| | 01:35 |
and we're seeing multiple lines.
Now the thing that I really like about
| | 01:39 |
this in terms of pointing it out to you
guys is that when I talk about an equal
| | 01:42 |
amount of space between elements, it
doesn't mean that all of them in all of
| | 01:45 |
these lines are going to get the exact
same amount of space.
| | 01:50 |
That's not how this works.
What it's doing is it's looking at the
| | 01:53 |
width of each container.
And then it's seeing how much available
| | 01:57 |
space will be left over after they're
distributed.
| | 02:00 |
So when you have a multiple line flex
container like this one, you're not
| | 02:03 |
guaranteed that those guys are all going
to be given the same amount of space
| | 02:06 |
between them.
And indeed, it simply couldn't happen
| | 02:09 |
becuase the width is differnt for these
elements.
| | 02:12 |
If they were all the same width, sure that
would work.
| | 02:15 |
So what we're interested is, how can we
align these multiple lines?
| | 02:19 |
How are we able to control that?
I'm going to go back into my code editor,
| | 02:22 |
and in the flex container selector, I'm
going to go ahead and add, I'm going to
| | 02:26 |
add a new property here.
I'm going to go webkit-align-content.
| | 02:31 |
Now you can see from the code handling
that is coming up over here, this the
| | 02:34 |
values that we can use for this center,
flex in, flex (UNKNOWN) space-around,
| | 02:38 |
space between this center stretch so, this
should be very familiar.
| | 02:43 |
Those are the same values that we can use
for our aligned items property.So we have
| | 02:46 |
center flex in flex out space-around space
between stretch so the more you start to
| | 02:49 |
use these properties, the more you you
start to say okay I kind of understand
| | 02:52 |
what's happening with with these values.
Let's start it with flex dash start.
| | 03:00 |
Let's start with that.
Now, just like for the rest of them, for
| | 03:03 |
the Microsoft property, it's using the
Tweener syntax, so that is going to be
| | 03:07 |
flex dash line dash pack.
And the value we're going to do there is
| | 03:12 |
start, and then We're going to do the
unprefixed version.
| | 03:16 |
So just align-content, and we're going to
do flex-start for that one.
| | 03:22 |
Okay, so I'm going to save this, and we'll
go out to the browser, and you can see
| | 03:25 |
it's very, very different in terms of
what's happening here.
| | 03:30 |
Whereas before the heights of these were
equally stretched to fill the container;
| | 03:33 |
because this one is flex start, they're
all aligned towards the top.
| | 03:38 |
So that tells us two things.
It tells us number one, what flex start
| | 03:41 |
does for us is it just moves everybody up
to the top, all these lines up to the top
| | 03:44 |
of the container.
But the second thing that it tells us is
| | 03:47 |
what the default behavior is for
align-content.
| | 03:50 |
So since they were all stretching the
entire height of the flex container, we
| | 03:54 |
know that the default for this is in
stretch And before we go back and and play
| | 03:57 |
with these values anymore, I wanted to
take you over to the specification, so you
| | 04:01 |
can sort of see a visual representation of
the different property values.
| | 04:08 |
So we have flex-start which we've already
played around with, we have flex-end.
| | 04:12 |
Notice the lines have all moved down
towards the bottom.
| | 04:15 |
We have center which is going to align
that cross axis to the center of the cross axis.
| | 04:19 |
We have space-between and space-around and
stretch.
| | 04:22 |
Now these are not new values for you,
you've already used them.
| | 04:25 |
With the individual flex items themselves.
The thing that you have to keep in mind
| | 04:29 |
when you're controlling a align-content is
that it's doing this with the lines
| | 04:33 |
themselves, not necessarily the flex items
but the lines.
| | 04:37 |
So you have to think of these flex item
lines as individual entities if you start
| | 04:41 |
aligning 'em using this property.
Now for the Microsoft the tweener syntax.
| | 04:46 |
The tweener syntax is very close.
You use start, end, center.
| | 04:51 |
Then for space between we would use
justify.
| | 04:53 |
And then space-around actually does have
an equivalent in this particular syntax
| | 04:56 |
it's called distribute.
And then we have stretch.
| | 05:00 |
So pretty much they're the same there's
just some slight differences there.
| | 05:02 |
Alright I'm going to go back to my code
and let's just kind of play around this a
| | 05:05 |
little bit.
Let's take this and let's do center just
| | 05:10 |
to kind of see what results we get by
using center.
| | 05:13 |
So I'm going to do center for everybody,
let's go ahead and save that.
| | 05:18 |
You can see that our lines are all
vertically centered right there in the
| | 05:21 |
center of our row and you have to kind of
keep this in mind guys what you're looking
| | 05:24 |
at is not a column, I've shortened its
width so that these boxes won't fit within
| | 05:27 |
the width of it.
But this is a row.
| | 05:31 |
So we're seeing cross-axis alignment here,
not main-axis alignment, and that's one
| | 05:34 |
thing you do have to keep in mind.
And then finally, let's do space-around.
| | 05:39 |
Let's see what space-around looks like.
Another thing that you would have to
| | 05:44 |
consider is that margins would affect
this.
| | 05:47 |
We know that vertical margins don't
collapse, but vertical margins would also
| | 05:50 |
be ignored if we were using space-around.
Keep in mind that margins would allow you
| | 05:54 |
to put a little bit of space between the
elements that you are using like center or
| | 05:57 |
flex star or flex in.
Remember that the vertical margin would
| | 06:00 |
not collapse.
But in this case, they're using the space-around.
| | 06:04 |
We're getting evenly spaced element, and
of course, we have that sort of half space
| | 06:07 |
at the top and the bottom because we ='e
space around But remember if we were using
| | 06:10 |
vertical margins here, space around would
ignore them.
| | 06:14 |
So those are little things that you
sort of have to file away and remember
| | 06:16 |
when you start combining all these
properties together.
| | 06:19 |
What I think is really cool about this,
again, going back to the code, we're using
| | 06:22 |
justify-content to align along the main
axis, and we're using space-around, which
| | 06:25 |
is giving us an equal amount of space and
then little bit of extra space at the
| | 06:28 |
beginning and the end.
Because we have it set to wrap and because
| | 06:34 |
the width of this is restricted and they
won't all fit, we get a multi-line flex container.
| | 06:39 |
And then we're using the align-content
property to control the cross access
| | 06:43 |
alignment of those multiply lines.
So there's a lot going on here but it
| | 06:48 |
gives us a really, really pleasing result.
We have all these elements spacing equally
| | 06:52 |
apart from each other in both horizontal
and vertical directions because we're
| | 06:56 |
controlling both main axis and cross axis
alignment.
| | 07:00 |
So that's one of the things I really
wanted to illustrate to you guys, that by
| | 07:03 |
combining properties like justify-content
and align-content, you can really achieve
| | 07:07 |
some very sophisticated alignment options
with these multiple line flex containers.
| | 07:13 |
| | Collapse this transcript |
| Challenge: Aligning flex items| 00:00 |
It's time to put what you've learned about
aligning items with FlexBox to the test.
| | 00:05 |
Now, I can tell you that this challenge is
going to be a little bit more involved
| | 00:08 |
than our last one.
So, let's take a look at what we're going
| | 00:11 |
to be doing.
I've opened up the index.html file from
| | 00:14 |
the 03, 06 directory.
And we're also going to be working in the
| | 00:19 |
flexbox.css file, which is found in the
_css directory.
| | 00:24 |
Now I want to point out what our
objectives are in this particular challenge.
| | 00:27 |
We want to focus on the alignment
properties that we've learned so far.
| | 00:31 |
We want to focus on the ability to align
items to the both the main and the cross axis.
| | 00:36 |
So your going to have to really pay
attention.
| | 00:38 |
To those two principles within this
challenge.
| | 00:41 |
And we're also going to take a look at how
margins affect alignment and how we can
| | 00:44 |
use some of the margin properties in order
to enhance how we're aligning our elements.
| | 00:50 |
So those are things that you want to focus
on as you look at these steps that we're
| | 00:53 |
going to be working with.
Now before you actually go in and start
| | 00:56 |
writing the properties and the selectors
yourself.
| | 00:59 |
Take a moment to go back to the blog
itself, look through this page structure
| | 01:02 |
again and the classes so that you
understand how things are put together and
| | 01:05 |
where, which elements need to be targeted
with the specific alignment properties
| | 01:09 |
that you're going to be doing.
All right, so let's take a look at kind of
| | 01:14 |
exactly what we need to be doing.
The first goal in step number one right
| | 01:18 |
here and if you open up flexbox.css all of
the instructions for this challenge are
| | 01:22 |
right up here at the top.
So it's a nice easy way to open this file
| | 01:26 |
up and you don't have to keep going back
to the video and listen to what I'm asking
| | 01:29 |
you to do.
We'll go through it in this video and then
| | 01:32 |
you can go back and read them in more
detail on your own.
| | 01:35 |
Alright, so the first thing, using
Flexbox, I want to make sure that all of
| | 01:39 |
the link elements in the main navigation
are centered vertically within the
| | 01:42 |
navigation bar, even the link that has
multiple lines.
| | 01:46 |
If we go out to the browser, this is what
I'm talking about.
| | 01:49 |
Currently, all of the links in the
navigation bar are aligned to the top of
| | 01:52 |
the navigation bar.
I want all of them centered, including
| | 01:56 |
this one, which has multiple lines as
well.
| | 01:58 |
And they all need to be centered right in
the middle.
| | 02:01 |
The next thing that we need to do is we
need to align to search form so that it
| | 02:04 |
aligns to the right of the nav bar.
So this search form, which is actually
| | 02:08 |
part of the same list as these guys, we
want it to appear at the very right hand
| | 02:12 |
side of the navigation bar, rather than
over here as just another item within the list.
| | 02:18 |
Now, in order to do that, you're going to
have to really think about is there an
| | 02:21 |
alignment property that I can use to do
this, or maybe is there a different way
| | 02:24 |
that I can do this using some of the
things that I know about how Flexbox
| | 02:27 |
treats certain properties.
So that's a clue for you, but I didn't
| | 02:32 |
want to spell it out for you.
But that's something that you’ll need to
| | 02:35 |
really sort of think about when you go in
and work with that particular objective.
| | 02:38 |
Alright, the next thing is inside the
hgroup element, you’re going to find two headings.
| | 02:43 |
Using flexbox, ensure that both of those
headings line up with each other based on
| | 02:47 |
their text baseline.
So if I go back into the blog again, it's
| | 02:51 |
this headline right here, Generic Blog,
and the tagline Every Post a Champion.
| | 02:55 |
Right now these two elements are appearing
side by side.
| | 02:59 |
But based on the properties of those
headlines they are just not lining up and
| | 03:02 |
not do I want them to line up, I want them
to line up so that both base lines of the
| | 03:06 |
text line up with each other.
So it looks like they're sitting on the
| | 03:11 |
same line.
So that's something I want you to do as well.
| | 03:15 |
Next, we're going to find the selector for
the social media icons.
| | 03:19 |
And then once you find that selector,
you're going to use Flexbox, now this
| | 03:21 |
sounds complicated but bear with me here.
You're going to use Flexbox to ensure that
| | 03:26 |
this space between the icons is twice the
gutter space on either side of the icons.
| | 03:31 |
Now what do I mean by that?
Well again here are the social media icons.
| | 03:35 |
I want them moved more towards the center
of this sidebar, but what I'd like to see
| | 03:38 |
is twice the space between them that I
have on either side.
| | 03:43 |
You know, in tradtional HTML terms, or
traditional CSS terms you'd think padding.
| | 03:48 |
You know, so I want the same amount of
padding here that I get here but I want
| | 03:50 |
double the amount of space in between
them.
| | 03:52 |
And you're going to be using Flexbox to
that do not padding or not any of the box
| | 03:55 |
model properties.
The next thing you want to do is go down
| | 03:59 |
to the footer.
You want to make sure the footer content
| | 04:02 |
itself is centered both horizontally and
vertically, no matter what the screen size
| | 04:06 |
is or the amount of content.
So in that case, down here in the footer
| | 04:10 |
is just a single of text.
But even if it wasn't even it was a lot
| | 04:13 |
more than that and regardless of the
screen size, I would like that text
| | 04:16 |
centered both vertically and horizontally.
So, you're really going to have to think
| | 04:21 |
about main axis alignment and cross axis
alignment and which properties to use to
| | 04:24 |
control that for the footer.
Now, once you're done with that I have a
| | 04:30 |
couple of bonus objectives for you.
Again, these are optional.
| | 04:33 |
If you really feel like you've got a
handle on this and you want to tackle
| | 04:36 |
these, these might be a tad bit tougher.
Number one, when we go down to a small
| | 04:40 |
screen layout, which is that single column
layout, there's a logo up top.
| | 04:45 |
And you want to make sure that logo within
its defined space is going to be centered
| | 04:48 |
both vertically and horizontally in its
area.
| | 04:51 |
So let me go ahead and shrink this down
and show you what I'm talking about.
| | 04:54 |
So I'm going to go a single column layout
here.
| | 04:57 |
So here we have the logo up top and we
want to make sure that, that is centered
| | 04:59 |
both horizontally and vertically in that
area.
| | 05:03 |
And the next step in the small screen
layout, I will also want to make sure that
| | 05:06 |
the search field is centered horizontally.
And the search field is being repositioned
| | 05:11 |
above the menu, in this case.
And you can see it's sort of over on the
| | 05:14 |
left-hand side, so I want to make sure
that, that is centered horizontally as
| | 05:17 |
well within the small screen.
Things like the social media icons what
| | 05:21 |
you're doing at the large screen view
should take care of those on the small
| | 05:23 |
screen view as well.
Alright so, remember, be sure to pay close
| | 05:27 |
attention to the flow direction of the
flex container so that you know which axis
| | 05:31 |
you're aligning against and you'll know by
that which alignment properties to use.
| | 05:38 |
Don't forget to go back to the exercises
in this chapter if you need a refresher on
| | 05:41 |
exactly how one of these properties work
and always feel free to open up the
| | 05:44 |
finished file and check out the styles if
you get stuck.
| | 05:49 |
This challenge should take you around 10
to 15 minutes to complete and when you're
| | 05:53 |
happy with your results watch the
solutions movie and compare your results
| | 05:57 |
to mine.
| | 05:59 |
| | Collapse this transcript |
| Solution: Aligning flex items| 00:00 |
I hope you had fun with our controlling
alignment challenge.
| | 00:03 |
Alignment with flexbox can be a little
tricky at first so, don't get frustrated
| | 00:07 |
if you didn't get all of the steps right
away.
| | 00:10 |
Let's take a look at each of the tasks for
the challenge, and then how I solve them.
| | 00:14 |
So I have the index.html page and the
flexbox.css from the 03_06 /finished files
| | 00:21 |
folder opened up.
And we're just going to take each of these
| | 00:25 |
objectives one by one and take a look at
the solution of them.
| | 00:28 |
So our first objective was to go into the
navigation bar and make sure that all the
| | 00:31 |
linked items were aligned vertically
within the nav bar.
| | 00:34 |
And you can see if I'm previewing the
finished file in the browser that indeed
| | 00:38 |
they’re doing just that, including the
multiple line one, and they’re all sort of
| | 00:41 |
vertically aligned within that, including
search field as well.
| | 00:46 |
It’s aligned as well.
If I scroll down to about oh, I don’t
| | 00:49 |
know, about line 37 or so, one of the
things that you’ll notice is the unordered
| | 00:53 |
list for the nav itself is a flex
container.
| | 00:58 |
So that’s step number one.
Remember, if we’re going to use any of
| | 01:00 |
these alignment properties, we have to
have them inside the flex container.
| | 01:03 |
Now, there's a dual step here because
you'll notice that the list items
| | 01:06 |
themselves are also flex containers.
So you can nest as many flex containers as
| | 01:11 |
you want inside other ones and we'll
explore that concept in more detail in the
| | 01:14 |
course later on.
Now the reason we use the line items here
| | 01:18 |
is because we needed cross-axis alignment.
Remember this navigation list is a row,
| | 01:23 |
not a column.
So we used align items to align them
| | 01:26 |
vertically to the center.
Now the second objective was to take the
| | 01:30 |
search form and align it to the right of
the navigation bar.
| | 01:34 |
Now in this case I didn't actually use a,
an alignment property.
| | 01:38 |
You can see right here we have the list
item of the classes search form so right
| | 01:42 |
about 45 or so and we used this property
right here, margin left auto.
| | 01:47 |
Now that may have been a little tricky
because you may have been looking at using
| | 01:50 |
like a line item or something like that.
But in this case we didn't have to go to
| | 01:53 |
any of the alignment properties.
We can just use the way that flex box
| | 01:57 |
handles auto margins to accomplish the
same thing.
| | 02:00 |
So by saying, margin left auto, if I go
back into the browser, that auto left
| | 02:03 |
margin, what it's doing is, it's basically
saying, hey, once you've moved me all the
| | 02:07 |
way over to the right, whatever available
space you have here, just go ahead and
| | 02:10 |
take that up.
And you can actually see that that space
| | 02:15 |
flexes if you resize the browser.
So it's really going to depend upon the
| | 02:18 |
size of the browser window or the screen
size in terms of how much space you're
| | 02:22 |
actually getting there.
Now the next objective was to find these H
| | 02:28 |
group headings and use flex box to ensure
that both of those headings line up with
| | 02:32 |
each other based on their text base line.
And of course, including the base line in
| | 02:37 |
the objective, probably gave it away.
But if I go down to around line 52 or so,
| | 02:42 |
there we go, yep.
So here are these H group styles and you
| | 02:47 |
can see that I'm using align items again,
because we need cross axis alignment
| | 02:50 |
because they're aligning a, along a row.
So the vertical will be cross axis.
| | 02:56 |
And you can see that they're using
baseline property for align items, and
| | 02:59 |
that results in both of the headlines
aligning to each other right along the
| | 03:01 |
baseline so that's perfect.
The next objective was to go down and find
| | 03:08 |
the selector for the social media icons,
and then we want to twice the space, ins,
| | 03:11 |
between the element as we have on either
side of them so we want a little bit of
| | 03:15 |
gutter space.
To the right and to the left, a little bit
| | 03:19 |
of extra margin space or padding space
however you want to, however you want to
| | 03:22 |
state that and then twice that amount of
size on the inside.
| | 03:26 |
Now, that's actually a little bit easier
to do than you think.
| | 03:28 |
So if that's one of the ones that you've
sort of got tripped up over, remember the
| | 03:31 |
alignment properties that we were working
with and the difference between space
| | 03:34 |
between and space around.
If I go down into the code to about line
| | 03:39 |
86 or so we can find those social media
icons.
| | 03:43 |
And you can see we're doing justify
content because in this case we're
| | 03:46 |
actually aligning them along the main axis
and we're saying space around.
| | 03:51 |
So what space around does is it gives you
an even amount of space between the elements.
| | 03:57 |
And then it takes that same amount and
puts half of it on either side of them.
| | 04:01 |
Now in all the exercises that we did
within the chapter you had multiple
| | 04:04 |
elements or multiple flex items along, you
know, inside of a flex container,
| | 04:07 |
sometimes three sometimes four sometimes
nine so this was kind of a little tricky
| | 04:10 |
thing that I threw at you because I only
put two in there and then it becomes, oh,
| | 04:13 |
well wait a second, maybe I can adjust
these with margins.
| | 04:20 |
But the reality of it is space around
works the same whether you have two
| | 04:23 |
elements or 16 elements.
So you can take advantage of that
| | 04:27 |
regardless of however many elements you're
working with.
| | 04:32 |
And the last objective that we had before
we get onto the bonuses is within the footer.
| | 04:36 |
We wanted to make sure that the footer
content is centered both horizontally and
| | 04:39 |
vertically, no matter what the screen size
or the amount of content.
| | 04:42 |
And really all I'm telling you to do there
is to do both a main and across axis alignment.
| | 04:48 |
So we needed to use two properties in
order to accomplish that.
| | 04:50 |
If I go down to about line 117 or so,
there's our footer.
| | 04:55 |
You can see that indeed we're using both
justified content and we're using a line item.
| | 04:59 |
So we're doing justified content for the
main axis, we're doing aligned items for
| | 05:02 |
the cross axis, and both of them have an
alignment option of center.
| | 05:06 |
And that results in the footer being
centered regardless horizontally and
| | 05:10 |
vertically regardless of the screen size.
You can see as I change that it goes ahead
| | 05:15 |
and updates and stays within the center
both horizontally and vertically so that
| | 05:19 |
is perfect.
Now we had two bonus things for you and
| | 05:24 |
they both dealt with small screen layouts.
When we're in small screen we want to make
| | 05:28 |
sure the logo is centered vertically and
horizontally in its area.
| | 05:32 |
Now if you think about it we just did that
within the footer so we just need to just
| | 05:35 |
sort of duplicate that within the small
screen layout.
| | 05:39 |
And the second bonus objective was within
the small screen layout ensure that the
| | 05:42 |
search field is centered horizontally.
So, to do that you would have to go down
| | 05:46 |
and find the media query.
So, I'm going to go down to about oh, I
| | 05:50 |
think it's around line 190 or so, yeah.
So here we are inside and if I scroll up,
| | 05:56 |
here's the media query itself.
So, going back down into about line 190 or
| | 06:02 |
so, here are our header styles.
And, what you had to do for this
| | 06:06 |
particular bonus objective is to go
through the previous styles and find out
| | 06:10 |
that what you're actually styling is the
age group.
| | 06:14 |
And that may have been the tricky part of
this bonus, was figuring out exactly which
| | 06:18 |
element controls that particular icon.
That may have take you a while to figure
| | 06:22 |
that out, but once you got there, solving
this was probably pretty simple for you.
| | 06:27 |
Once again, you're using align items, and
justify content to go ahead and center
| | 06:30 |
that horizontally and vertically within
that space.
| | 06:34 |
If we go up a little bit, you can see that
just above that we have the selector that
| | 06:38 |
controls the search form, and all we're
doing there is align self.
| | 06:43 |
And again this may have tripped you up a
little bit too, since I was only asking
| | 06:46 |
you to do horizontal alignment and since
that's cross axis because we have a one
| | 06:50 |
column layout.
You may have thought, well, maybe for that
| | 06:55 |
I'm going to use align items, and when you
tried that it probably messed up all of
| | 06:58 |
the, the navigation alignment as well.
But remember, if we're doing cross axis
| | 07:04 |
alignment, we can do individual items by
using align cell.
| | 07:07 |
And that's exactly what I did here for the
search form.
| | 07:10 |
So, for that one, we used align cell
center.
| | 07:12 |
And again, if I go out to the browser.
So if we go down the small screen layout
| | 07:16 |
within the browser you can see regardless
of the size of the window when we're at
| | 07:20 |
that single column layout the icon is
centered horizonally and vertically, and
| | 07:24 |
if we go down here's our search form.
Notice that it is centered horizontally in
| | 07:30 |
that space and again we're doing that to
that item alone using the align self
| | 07:34 |
property excellent now.
Again, don't be too worried if your code
| | 07:39 |
doesn't exactly match mine.
Especially, hey if you got it to work
| | 07:42 |
that's really the important thing.
However, I also hope that it's shown you
| | 07:46 |
exactly how easy and powerful flexbox
alignment properties are in terms of
| | 07:50 |
layout and how much they're going to add
in making css layouts easier to write in
| | 07:54 |
the future.
| | 07:57 |
| | Collapse this transcript |
|
|
4. Element Display OrderDefining element display order| 00:00 |
One of the biggest problems with float
based layouts is their dependence on the
| | 00:04 |
source order for layout.
You know, basically, we can't do much with
| | 00:08 |
floats to separate the order in which the
elements are presented from the order in
| | 00:11 |
which they're found in the markup.
Flexbox does just that by giving us the
| | 00:17 |
power to reorder our elements any way that
we want.
| | 00:22 |
So to experiment with this I've opened up
the order.htm file from the 04_01.
| | 00:29 |
And just structurally if I scroll down,
you can see that we have our flex
| | 00:31 |
container with our boxes inside of it.
And notice that each of these has classes
| | 00:36 |
that correspond to them.
One, two, three, and four.
| | 00:39 |
Now, because in the source order one shows
up first, two after that, three, and four,
| | 00:43 |
if I look at that in the browser,
obviously it's how we expect to see them.
| | 00:48 |
One, two, three, and four.
If this was a float based layout, we could
| | 00:52 |
do something like floating two to the left
and one to the right.
| | 00:56 |
And it would kind of fake it a little bit,
maybe.
| | 00:59 |
But it's very difficult to have total
source order independence saying, hey let
| | 01:02 |
the third one show up first, then number
two, then four, then one.
| | 01:07 |
That's pretty much impossible to do with
float base layouts.
| | 01:10 |
Well, very, very easy to do with flexbox.
So, if we go up to the css, notice that
| | 01:14 |
I've already got some selectors all ready
to go for you.
| | 01:18 |
And I'm going to start with the one
selector.
| | 01:21 |
Now, the property that we use in order to
reorder them is the very aptly named order
| | 01:24 |
property and that's all you need.
Now, of course I'm going to do our
| | 01:29 |
prefixes, so I'm going to say webkit dash
order and then you pass a number in.
| | 01:34 |
Now, that number can start at zero and it
can go up as high as you need it to go.
| | 01:39 |
You can use negative values for it as
well.
| | 01:41 |
We'll talk more about that a little bit
later on.
| | 01:43 |
Essentially the lowest value shows up
first, followed by each corresponding value.
| | 01:48 |
So, if I say webkit order 4 for our first
one and then follow that up with ms.order
| | 01:53 |
of four, and follow that up with just the
generic order property of four and I'll
| | 01:59 |
tell you what rather than having to write
out all those prefixes again I think I'm
| | 02:05 |
just going to copy these and then paste
them in two, three, and four.
| | 02:15 |
Now, you know, here's something
interesting.
| | 02:16 |
Copying and pasting them actually let me
show you guys something pretty interesting.
| | 02:19 |
If you do the order property and you give
them all the same value, watch what happens.
| | 02:25 |
One, two, three, four.
Essentially if you're using more than one
| | 02:28 |
value once, then source order is used to
determine when that element should appear
| | 02:31 |
in the presentation.
But if we change this around.
| | 02:35 |
Let’s say we change number two to three,
and we change number three to two, and
| | 02:42 |
then we change number four to one.
Now actually, in terms of the index that
| | 02:50 |
it starts with, it starts counting at
zero.
| | 02:53 |
We're actually leaving zero empty if you
will.
| | 02:54 |
So, if I save this and go back into my
browser, notice now, four, three, two, one.
| | 03:01 |
Now, I mentioned before that these do have
total source order independence, so if I
| | 03:06 |
go number three and I change its value
from two to zero and save that, notice
| | 03:10 |
that now number three shows up first
followed by four followed by two followed
| | 03:15 |
by one.
So you're allowed to do any order that you want.
| | 03:21 |
It does not matter.
And negative values are accepted as well.
| | 03:25 |
So for two instead if I said say negative
five, say that.
| | 03:33 |
Notice that two shows up.
Now, the reason I'm really making a point
| | 03:36 |
of showing you the negative values, is
that for a lot of dynamic layouts, one of
| | 03:39 |
the things I've seen people do before with
flexbox, since they don't really know what
| | 03:42 |
the order of properties is going to be, if
there's an element that they want to
| | 03:45 |
ensure shows up first, then they go ahead
and give it some crazy negative value like
| | 03:48 |
negative 200 and that way no matter what
else is going on within their layout
| | 03:51 |
that's the first element that shows up.
So for the most part the order property is
| | 03:59 |
pretty easy to understand and implement.
However I feel like I have to warn you
| | 04:03 |
here, just like alignment the flex flow
property can cause a little bit of
| | 04:06 |
confusion around how the order property
works so we're going to take a look at how
| | 04:09 |
those two properties combine in our next
exercise.
| | 04:14 |
| | Collapse this transcript |
| Flex flow and display order| 00:00 |
On the surface, the order property seem
pretty straight forward.
| | 00:04 |
However, when the flex flow properties
change, the display order will often
| | 00:08 |
change too, and sometimes with very
unintended side effects.
| | 00:13 |
So I want to illustrate this, by working
with the flow-order.htm which you can find
| | 00:18 |
the 402 directory.
Just to give you an overview of what's
| | 00:21 |
going on, if I scroll down into the
structure.
| | 00:24 |
You can see once again we have all of our
boxes.
| | 00:26 |
We have four of them down there, and they
have classes one through four.
| | 00:29 |
And currently we've got class selectors
that are controlling their display order
| | 00:34 |
through the order property.
And you'll notice that for the first one
| | 00:38 |
is four, and then we go three, and then we
go one, and then we go zero.
| | 00:42 |
So, based on the values that we're passing
here, and if you're wondering why I
| | 00:46 |
skipped two, just because.
Now so it doesn't really matter just to
| | 00:49 |
kind of illustrate the fact that you don't
have to go in sequence you can go out of sequence.
| | 00:53 |
And there's nothing wrong with that, it'll
take the value itself.
| | 00:56 |
So we should expect in this case to see
four first, three second, second third,
| | 01:00 |
and then finally one.
If we go out to the browser you can see
| | 01:04 |
that is indeed exactly what we see for
four, three, two, and one.
| | 01:08 |
Okay, well that is not the only way.
It's maybe the easiest to get those
| | 01:11 |
results, but it's not the only way to get
them.
| | 01:13 |
So let me show you what we can do with
flex flow.
| | 01:16 |
What I'm going to do is I'm going to
comment out all of these individual class
| | 01:20 |
properties, all right?
So I'm just going to go ahead and do a
| | 01:23 |
multi-line comment around this because I
want to turn them off for just a moment.
| | 01:27 |
Then I'm going to go back up to my flex
container, and I'm going to use the flex
| | 01:31 |
flow property.
So I'm going to come in here and do
| | 01:36 |
-webkit, -flex-flow, and I want to do
row-reverse.
| | 01:42 |
Now, we've already seen this.
We used this a little bit earlier.
| | 01:45 |
And again, to make life easier on myself,
I'm just going to Copy and Paste this.
| | 01:51 |
And change the vendor prefix and then get
rid of the vendor prefix all together so
| | 01:55 |
that we have all of our syntax.
So, we looked at this earlier in the title
| | 02:01 |
if you remember and what this does for us
is it displays in a row, but it reverses
| | 02:04 |
exactly where it displays in a row.
And you can see in the browser, what it
| | 02:09 |
does is it flips everything.
Notice that four, three, two and one, so
| | 02:12 |
we're getting that same reorganization
where the last one is first, and the first
| | 02:16 |
one is last.
But it also reverses where the flex items
| | 02:20 |
appear within the row.
So instead of starting them a the main
| | 02:23 |
access start which would be on the left
hand side it starts them on the right hand side.
| | 02:27 |
So we're almost at that place but we're
not quite there.
| | 02:30 |
It's reordered the flex items for us but
it's pushed them all the way over to the
| | 02:34 |
right edge.
Well we have other properties that we can use.
| | 02:37 |
Remember the justify content properties,
so what we're going to do here is we're
| | 02:41 |
going to go back and we're going to say
webkit-justify content.
| | 02:46 |
And here we're going to say flex-end.
So again I'm just going to Copy this line
| | 02:50 |
to make life a little bit easier I'm
going to save myself some typing.
| | 02:53 |
And I'm going to Paste this in.
And what I'm going to do here is I'm just
| | 02:57 |
going to get rid of the prefix altogether.
Because, if you remember, with the MS
| | 03:02 |
extender prefix it's using the tweener
syntax.
| | 03:05 |
And just by content is flex-pack in that
instance and we'll say, end, okay?
| | 03:12 |
All right, so now what does this do for
us.
| | 03:14 |
Well, remember just by content, flex-start
is going to make sure that everything is
| | 03:18 |
lined up at the beginning of the row or
column.
| | 03:21 |
Flex-end is going to do it at the end of
the row or column.
| | 03:25 |
Now here's the mind bending part of this.
Because we reverse the row, and because we
| | 03:30 |
reverse the order in which the flex items
were appearing on the main axis.
| | 03:35 |
Then flex-end does the same thing, but in
reverse.
| | 03:39 |
So, if I go back, now what it does is
pushes everything over to the left hand
| | 03:42 |
side and we still have that reverse order
four, three, two, one.
| | 03:46 |
So essentially in this case we didn't
absolutely have to use web kit order to
| | 03:50 |
get those results.
It may have been easier and more flexible,
| | 03:54 |
but flex-flow and justify-content can be
combine to do just the same thing.
| | 03:59 |
Okay now other than just showing you this
sort of esoteric exercise that yet this is possible.
| | 04:05 |
Why do I bring this up?
I bring this up because it matters.
| | 04:10 |
A lot of times, in more complex layouts
you're going to find yourself combining a
| | 04:13 |
lot of properties together within a
layout.
| | 04:15 |
And you need to understand how those
properties are going to interact with each other.
| | 04:19 |
For example, if I just take the shackles
off of my display properties in terms of
| | 04:24 |
the order, if I just go ahead and take
those off watch what that does.
| | 04:29 |
So when I save this and go back out to the
browser this we're back to one, two, three
| | 04:33 |
and four.
So even though you took the time to write
| | 04:36 |
these selectors and put them in the order
that you wanted them and change that
| | 04:40 |
order, nothing happened.
And nothing happened because you have the
| | 04:45 |
flex flow and the justify content
properties up here that are affecting
| | 04:49 |
those as well.
So, it's one of those things that once you
| | 04:53 |
start combining multiple properties
together.
| | 04:56 |
You have to start thinking, how are these
properties going to interact with each other.
| | 05:00 |
And what are the results going to be and
they're not always going to be the most
| | 05:03 |
obvious results.
So actually, in order to get the first
| | 05:07 |
one, in this instance, to show up last, I
have to make it the lowest value.
| | 05:14 |
And that goes against counter to any logic
you've ever used before.
| | 05:18 |
But because of the other properties that
you've set, you've imposed those
| | 05:21 |
conditions on yourself and one is indeed
last.
| | 05:25 |
Now, I'm really not just trying to confuse
you here, I really want to get a point across.
| | 05:30 |
As with almost everything that you do in
Flex Box, the flow direction of the flex
| | 05:34 |
container has a direct effect on display
order.
| | 05:39 |
For most layouts, that's really not
going to be that big of a concern.
| | 05:43 |
But as your layouts get a lot more
complex, you're going to need to watch
| | 05:46 |
this very closely.
Also, if you plan on changing these
| | 05:49 |
properties dynamically later on.
Make sure that you keep track of any
| | 05:53 |
potential effects that combining these
properties might have.
| | 05:57 |
| | Collapse this transcript |
| Nesting flex containers| 00:00 |
It's important to note that flex items can
also be flex containers.
| | 00:05 |
This allows you to nest as many flex
containers as your layout or your
| | 00:08 |
interface requires.
The good news, at least in terms of
| | 00:12 |
display order which is what we're focusing
on, nesting those flex containers doesn't
| | 00:16 |
really create any additional complexity as
each flex container has its own unique
| | 00:20 |
display order.
To illustrate that I'm going to be working
| | 00:25 |
in the Nesting.HTML file found in the zero
four, zero three directory.
| | 00:29 |
And before we get into writing the display
properties styles I want to go down and
| | 00:33 |
look at the structure of the page because
it's changed a little bit.
| | 00:37 |
Okay, we have our flex container as normal
and inside that we have one, two, three,
| | 00:43 |
and four boxes.
However you're going to notice inside box
| | 00:47 |
number two right here we have this new
section showing up.
| | 00:51 |
Notice that this section is also a flex
container.
| | 00:53 |
It has a class of nest applied to it.
And then we have four boxes inside of that
| | 00:58 |
and each of those individual boxes have
classes as well.
| | 01:02 |
Nest one, two, three and four that are
going to allow us to control their display order.
| | 01:06 |
So just to show you what that's look like
within the browser you can see here we
| | 01:09 |
have our top our periflex container four,
one, two and three and then we have one,
| | 01:12 |
two, three and four nested inside of two.
Now if you're wondering the why the top
| | 01:17 |
level flex items are displaying in the
order that they are you'll notice that we
| | 01:21 |
already have existing classes for one
through four, and they have a display
| | 01:24 |
order that's already defined.
Okay well let's take a look.
| | 01:29 |
At how we can control the display order of
the nested flex items.
| | 01:33 |
So I'm going to go down just below the
last selector here and I'm going to create
| | 01:38 |
a new class for nest.
Remember, that's the section that's nested
| | 01:42 |
inside of the second box.
So for this one, I'm going to change the
| | 01:46 |
flex flow direction.
I'm going to go ahead and change that to
| | 01:50 |
flex flow, and we'll do a column.
Let me just copy this, and paste that
| | 01:59 |
couple of times.
We'll change that to the Microsoft syntax.
| | 02:08 |
And then we'll just go ahead and take the
vendor prefix off of it all together.
| | 02:14 |
Now what that's going to do for us, I'll
save this is it's now going to stack these
| | 02:18 |
nested elements one on top of another.
So this is actually sort of a real world
| | 02:23 |
application where you might have a menu
structure inside of a side bar for
| | 02:26 |
example, something like that.
Okay now remember each of these nested
| | 02:32 |
items have their own class that we can use
to change its display order so we have
| | 02:36 |
nest one, two, three and four.
Let's say we want to take the bottom one
| | 02:41 |
and move it up to the top right, so by
coming in and saying nest-four I can now
| | 02:45 |
change it's display order by using the
order properties, so can webkit-order.
| | 02:52 |
We'll go ahead and give it a negative one.
And remember that technique of giving
| | 02:56 |
something a negative value is just
going to automatically make it come up to
| | 02:59 |
the top and be the first one that shows
up.
| | 03:02 |
With microsoft remember flex order is the
syntax there so negative one.
| | 03:07 |
And then we're just going to use order of
negative one for the non prefix version.
| | 03:16 |
We'll save that and now you'll see four
shows up at the very top.
| | 03:21 |
Now, what this really illustrates more
than anything else is that nested flex
| | 03:24 |
containers have their own display order.
So each flex container has its own
| | 03:29 |
independent display order within it.
And you can change them and rearrange them
| | 03:34 |
anyway that you want.
One of the reason that we had to use
| | 03:37 |
specific class names on the nested items,
is that if I had used the classes one,
| | 03:40 |
two, three and four, well then the same
order would be given to each of the flex containers.
| | 03:46 |
That may have been what you're looking for
in some instances, but I really doubt it.
| | 03:50 |
So be careful about writing generic
classes to control display order, because
| | 03:53 |
if you do that, anywhere that you apply
those classes, that display order is
| | 03:57 |
going to happen within that context.
It also brings us to the sad realization
| | 04:02 |
that if I wanted to take this element,
number four right here, and make it show
| | 04:06 |
up in front of this one it doesn't quite
let me do that so source order
| | 04:09 |
independence only works within the context
of the flex container.
| | 04:16 |
So, what that means is we're not really
going to get true source order
| | 04:19 |
independence until the support of the CSS
grid layout module.
| | 04:24 |
| | Collapse this transcript |
| Challenge: Controlling display order| 00:00 |
In this chapter we've learned how the
order property allows us to control the
| | 00:03 |
display order of flex items within
individual flex containers.
| | 00:08 |
This gives us a powerful new tool when
creating many types of layouts, especially
| | 00:11 |
responsive ones.
So in this challenge, our main objective
| | 00:15 |
is to focus on how the order property
works within individual flex containers
| | 00:19 |
but, we also want to focus on how that can
be leveraged for multiple screen layouts.
| | 00:25 |
So in this challenge, your going to be
working in the index.html file found in
| | 00:29 |
the 04_04 folder as well the flex box.css.
This where you're going to find all of our
| | 00:35 |
instructions and you'll be writing the
styles for this one, that can be found in
| | 00:39 |
the _css directory as well.
So before we get started with the
| | 00:44 |
challenge itself, I would encourage you to
go back to the index file and look through
| | 00:47 |
the structure of the page again.
Even if you feel pretty comfortable with
| | 00:53 |
it because in order to really get control
over the display order of objects or flex
| | 00:56 |
items, you need to understand how they're
structured.
| | 01:01 |
So go back through and make a note of all
the top level elements, say like this nav
| | 01:05 |
element or the header that comes after it
and then inside of those, make a note of
| | 01:09 |
the child objects and how they're
structured.
| | 01:13 |
That way when you start having to reorder
the source order of elements, you'll
| | 01:17 |
understand which flex container they're
inside of and what you can do in terms of
| | 01:21 |
changing that source order.
So that's a very important step in this
| | 01:25 |
challenge, is to first really understand
the structure of the page, that you're controlling.
| | 01:31 |
OK, so lets go back into the flexbox.css
and take a look at the individual
| | 01:34 |
objectives for this challenge.
The first thing that I want you to do is,
| | 01:39 |
and its really the only thing that deals
with the larger screen or desktop view and
| | 01:42 |
it deals with the sidebar.
And I'm just going to take a look at this
| | 01:46 |
page in the browser.
Currently, the side bar is showing up over
| | 01:50 |
here on the right hand side and it has
everything to do with source order, it
| | 01:53 |
shows up after the main content.
Well, your job is to use Flexbox to change
| | 01:58 |
the order that they appear in, so that the
side bars on the left hand side and the
| | 02:02 |
main content is in the right.
Now everything else from this time point
| | 02:08 |
forward in the challenge, is going to
happen within the smaller screen layout,
| | 02:11 |
so we're now going to turn our attention
the small screen version of our layout.
| | 02:17 |
For that, if I scroll down through our
styles, these styles start inside the
| | 02:21 |
media query, around 125.
So every objective from this point on, is
| | 02:26 |
going to focus on these styles that appear
inside this media query.
| | 02:31 |
Alright, so going back up to our
objectives, the second thing that I want
| | 02:34 |
you to do is, in the smaller screen view,
take a look at the navigation.
| | 02:38 |
Now I want you to set the display order,
so that the search form, it actually shows
| | 02:42 |
up first, in front of the remaining
navigation elements.
| | 02:46 |
If we go to our browser and let's shrink
that down, so that we can get our single
| | 02:49 |
layer column layout happening.
When I do that, again the search form is
| | 02:53 |
showing up on the bottom, I want it on the
top of all of these navigational elements.
| | 02:59 |
The next objective is to take a look at
the main content styles and change the
| | 03:03 |
display order, so that the following
elements appear in this order.
| | 03:08 |
Newsletter first, then events, then intro
and then social.
| | 03:11 |
If we think about this being the main
content, you have the events showing up,
| | 03:15 |
then you have the intro, then you have the
social media icon.
| | 03:19 |
We want to change that display order so
they're appearing newsletter first, events
| | 03:22 |
after that, then intro, and then social.
Now finally, in the spotlight section, I
| | 03:29 |
want you to change the display order so
that the elements appear, item first, then
| | 03:33 |
news, and then facts.
If I go to my blog layout and I scroll
| | 03:38 |
down to the spotlight section, you could
see news is showing up first, followed by
| | 03:42 |
item, followed by facts.
And I want you to do it so that items show
| | 03:47 |
up first, then news and then facts.
That should keep you pretty busy.
| | 03:51 |
However, I think most of those objectives
are pretty straightforward, so I gave you
| | 03:55 |
a bonus.
It's something that you really are going
| | 03:58 |
to need to think about and focus on.
In this smaller screen layout, I want you
| | 04:03 |
to use Flexbox to do a couple of things
for me here.
| | 04:06 |
First, set the entire page to a single
column, OK?
| | 04:09 |
I know what you're thinking already, well,
wait a second, it's already in the single
| | 04:12 |
column, well bear with me.
After you do that, then I want you to
| | 04:15 |
change the display order, so that the
header shows up first, followed by the
| | 04:19 |
spotlight, followed by the main elements,
followed by the nav, followed by the footer.
| | 04:25 |
If you think about the order that they're
in right now, we have the nav first, then,
| | 04:29 |
we have the header, then, we have main,
then you have spotlight, then you have footer.
| | 04:35 |
And that's all based on source order, so I
want you to change that.
| | 04:38 |
Now here's the really tricky part of this.
These are all top level elements.
| | 04:42 |
OK, so what you'll need to do is you'll
need to review the way that currently
| | 04:45 |
those top level elements are being changed
to display in a single column and you're
| | 04:49 |
probably going to have to modify that, so
that you have control over them as a Flex Container.
| | 04:56 |
Then, you'll need to decide how you
want to change the display order.
| | 05:00 |
Now, as it mentions here in the step,
you're going to need to create all of the
| | 05:03 |
selectors for this styling, alright?
And you're going to have to decide what
| | 05:07 |
the best way is, to display the page in a
single column while gaining control over
| | 05:11 |
that source order, so, there's a lot of
ambiguity there, and you're going to have
| | 05:14 |
to find out exactly how to achieve that
bonus.
| | 05:18 |
Now obviously this is the bonus.
The bonus is going to take a little bit longer.
| | 05:22 |
I think if, you look at those, main
objectives up top, those are going to take
| | 05:25 |
you around, I don't know anywhere between
five to ten minutes to do because the
| | 05:28 |
order property is pretty easy to use.
The bonus on the other hand might actually
| | 05:33 |
add another ten minutes or so to it.
So you might want to do it in stages,
| | 05:36 |
where you do the first series of
objectives first, take a break, then come
| | 05:39 |
back and do the bonus separately.
Now at first, I imagine that actually the
| | 05:44 |
challenge, especially those first four
items, probably seems pretty simple to you.
| | 05:49 |
But as you go through it, I want you to
really examine the pay structure closely.
| | 05:53 |
Think about what works and what might not
work, in regards to using the order property.
| | 05:58 |
As always, be sure to check your results
with mine by watching the solutions video
| | 06:02 |
that follows this one.
| | 06:04 |
| | Collapse this transcript |
| Solution: Controlling display order| 00:00 |
Congratulations!
You've completed the last challenge in
| | 00:03 |
Flexbox First Look.
And as a result you've completed the full course.
| | 00:08 |
Let's take a look at the solution file and
how it compares to your own work.
| | 00:12 |
So, I had the index.html and the
flexbox.css file opened up from the 04_04
| | 00:17 |
finished files folder.
Alright, I'm going to go through each of
| | 00:21 |
these objectives, step by step, and show
you the solution that I came to, and talk
| | 00:25 |
a little about why I solved it the way
that I did.
| | 00:29 |
And in this case, there may actually have
been multiple ways to solve it, so if your
| | 00:32 |
code doesn't exactly match mine, as long
as it works and you think it's an
| | 00:34 |
efficient way to do it, then that's just
fine.
| | 00:38 |
Okay, so the first step was the side bar
itself.
| | 00:42 |
We wanted the side bar to appear on the
left side and the featured article on the right.
| | 00:46 |
So this one was a fairly simple solution.
So, if I scroll down in my code, to say,
| | 00:50 |
right here around line 67 or so.
I can see that I have two classes here for
| | 00:54 |
featured and side bar and all I'm doing is
the order property here.
| | 00:59 |
I put featured at 1.
I put sidebar at 0.
| | 01:02 |
If you did 2 and 1, it doesn't really
matter.
| | 01:04 |
As long as sidebar is the lower number,
the result you should get, is this.
| | 01:08 |
Sidebar on the left-hand side, main
content on the right-hand side.
| | 01:12 |
Perfect.
Now, the rest of the objectives dealt with
| | 01:15 |
the smaller screen.
The first one was the navigation itself.
| | 01:19 |
We wanted to set the display order so that
that search form displays first in front
| | 01:22 |
of the remaining navigation.
So, I'm going to scroll down and find my
| | 01:27 |
solution for that.
Here it is.
| | 01:31 |
Right around the line 176 from me.
Alright, so you can see we have a class
| | 01:34 |
called search form that identified that
particular list item individually from the
| | 01:39 |
rest of them.
So, if you looked at the structure of the
| | 01:43 |
code, that was a clue for you that hey,
here's something that I can use.
| | 01:47 |
And here you'll notice that all we did was
take the webkit order and set it to
| | 01:51 |
negative 1.
So, some of you guys may have taken the
| | 01:54 |
other list items and applied classes to
them and given them all ordinal values so
| | 01:57 |
that you can do this one.
But in reality, you don't need to do that.
| | 02:01 |
You can just take this one, set it to
negative 1 and that will automatically put
| | 02:04 |
it in front of rest of them, which are
based on source order.
| | 02:10 |
So, if I go out of the browser and look at
our single column layout, when I scroll
| | 02:13 |
down now, you can see the search form
shows up before any of the other
| | 02:16 |
navigational elements.
And next up we wanted to tackle some of
| | 02:23 |
the main content elements themselves.
We wanted to change the display order so
| | 02:27 |
that Newsletter showed up first, followed
by Events, followed by Intro and then
| | 02:30 |
followed by Social.
So, if I scroll down I'm going to get to
| | 02:35 |
about line, oh yeah, here they are, around
212 or so for me, yours may be different.
| | 02:42 |
But here I can see that I've got selectors
for Intro, Social, Newsletter and Events.
| | 02:47 |
And other than some margin settings that
were already there, all I did here was set
| | 02:51 |
the webkit order.
So you'll notice Newsletter is at 0,
| | 02:55 |
Events is at 1, Intro is at 2 and Social
is at 3.
| | 02:58 |
If I check that in the browser and scroll
down into our main content, let me get
| | 03:02 |
past the featured article.
There's Newsletter.
| | 03:06 |
There's Events.
There is our Intro and there's our Social
| | 03:09 |
Media icons displaying in exactly the
order that we wanted them to.
| | 03:13 |
Perfect.
Now going back into our code, let's go up
| | 03:17 |
and take a look at our last main
objective.
| | 03:19 |
And that was in the Spot Light section.
We wanted to change the display order so
| | 03:23 |
that Items showed up first, then News and
then Facts.
| | 03:28 |
And if I scroll down for those, we've got
some selectors down here at around line
| | 03:32 |
243 or so.
We have News, Item and Facts.
| | 03:37 |
And again, you'll notice that I just set
Item to 0, News to 1, Facts to 2, I could
| | 03:41 |
use different values here so long as Items
was the lowest, News was next and Facts.
| | 03:47 |
And if I go out to the browser and take a
look at these, go to my Spotlights, you
| | 03:50 |
can see the Item is first.
The News is second and the Facts is indeed last.
| | 03:58 |
Now, the big bonus that I had you doing.
And this, of course, was optional.
| | 04:03 |
If I scroll back up to it.
Remember, what we're doing is we're
| | 04:06 |
going to use Flex Box to set the entire
page to a single column.
| | 04:09 |
And then display the main section regions
with the header showing up first followed
| | 04:13 |
by spotlight, main nav, and then footer.
Okay, now, there was actually the file
| | 04:17 |
that you started with, if you scrolled
down to the media queries themselves,
| | 04:21 |
right here.
At about line 129 or so, you would have
| | 04:25 |
found this comment; set direction to
single column and set ordinal values.
| | 04:30 |
After that there was nothing until you hit
the top navigation styles.
| | 04:33 |
So all of these rules you're seeing right
here, I created for this and again, this
| | 04:36 |
is something you may have approached very
differently.
| | 04:39 |
So, just kind of listen to my rationale
behind my solution and then you can sort
| | 04:42 |
of compare that to yours.
So, the first I did was I took the body
| | 04:46 |
element itself and I set that display
property to flex.
| | 04:50 |
That means that I made the body itself a
flex container, so all of the top level
| | 04:53 |
elements automatically become flex items.
Then to make sure it was a single column
| | 04:59 |
layout, I set the flex direction to
column.
| | 05:01 |
If you use the flex flow shorthand, that's
fine, that's, it does exactly the same thing.
| | 05:06 |
Now I want to point out that some of the
items that were set to flex containers
| | 05:09 |
have their display properties set to block
and that's what's turning some of the flex
| | 05:12 |
properties in the larger screen size off.
Do want to point out though, that body, by
| | 05:17 |
default, its display property was set to
block, which is why it was a single column
| | 05:20 |
layout to begin with.
So I didn’t really need to set flex
| | 05:24 |
direction to column.
I didn’t really need to set display
| | 05:27 |
property to flex.
But the only reason I needed to do that
| | 05:30 |
was because there was no other way for me
to control order value of the items inside
| | 05:34 |
of it, without that being a flex
container.
| | 05:37 |
So, that was step number one.
After that it was pretty simple.
| | 05:41 |
I just found either the element selector
or the classes that I used on those
| | 05:44 |
individual elements, and then gave them
ordinal values.
| | 05:48 |
Started with the header at 0, then I went
to spotlight at 1, main got 2, navigation
| | 05:53 |
got 3, and footer got 4.
So if I check this out in the browser.
| | 05:58 |
I can see there's the header, starts at
the top, then it's followed by spotlight.
| | 06:02 |
After spotlight we have our main area.
After the main area we have our nav and
| | 06:06 |
after nav we have the footer.
So, how'd you do?
| | 06:10 |
Now you know if your code doesn't exactly
match mine, don't worry about it.
| | 06:14 |
Unless of course it doesn't work.
In that case really think about why it
| | 06:17 |
doesn't work.
Just concentrate on the most efficient way
| | 06:20 |
to achieve the desired results.
For that matter, concentrate on how
| | 06:23 |
efficient Flexbox is going to make you
once support levels make it reliable to use.
| | 06:29 |
That's the end of our exercises.
Be sure to check out the additional
| | 06:32 |
resources video next to find out where you
can dive a little deeper into Flexbox.
| | 06:37 |
| | Collapse this transcript |
|
|
ConclusionAdditional resources| 00:00 |
Thanks for watching CSS Flexbox First
Look.
| | 00:04 |
I hope you've enjoyed it, and that you're
excited about flexbox will mean to page layout.
| | 00:08 |
Before we go, I wanted to leave you with a
few resources that I think will really
| | 00:11 |
help you learn more about flexbox, and
when it might be ready for you to use.
| | 00:16 |
So I've actually opened up the
resources.htm file that you can find in
| | 00:19 |
the 05_01 folder.
The first thing I want to show you is the
| | 00:23 |
CSS Flexible Box Layout Module.
Whenever you want to learn something, go
| | 00:28 |
to the source, and this is the actual
specification that the W3C has for the
| | 00:32 |
flexbox layout module.
So here's where you can learn more about
| | 00:36 |
the specification, the syntax, and how
everything works, including, if you really
| | 00:40 |
feel like diving in deep, you can read the
flex layout algorithm, it is fascinating.
| | 00:48 |
The next resource I want to give is Can I
Use Flexbox.
| | 00:51 |
This is a page you should bookmark.
Can I Use is a fantastic resource for
| | 00:54 |
browser support for different CSS and HTML
properties.
| | 00:58 |
And they have a page dedicated to flexbox.
So if you go to caniuse.com/flexbox you'll
| | 01:03 |
be able to track when flexbox is going to
be supported in specific browsers and what
| | 01:07 |
vendor prefixes are necessary to get it to
work.
| | 01:13 |
Next, there's a great page on the CSS
flexbox 2009 and 2011 syntax.
| | 01:21 |
Now, this page doesn't talk about the 2012
syntax but for those of you that really
| | 01:24 |
weren't around for the earlier versions of
it and you're wondering how to support
| | 01:28 |
them, this gives an overview of both the
2009 and the 2011 which is considered the
| | 01:31 |
tweener syntax.
So, if you take a look at this page in
| | 01:36 |
addition to the actual flexbox
specification you'll understand how all
| | 01:40 |
the syntax works.
So this is definitely a page that you'll
| | 01:43 |
also want to bookmark.
In terms of Internet Explorer, Microsoft's
| | 01:50 |
Developer Network has a really great page
on the flexbox layout and how it's
| | 01:54 |
implemented within Internet Explorer 10.
This not only goes into some details about
| | 01:59 |
flexbox, this is where you can pick up and
learn the tweener syntax and how it works
| | 02:03 |
with the -ms vendor prefix.
There's also a of really nice article by
| | 02:09 |
Chris Coyler which talks about old flexbox
versus new flexbox syntax.
| | 02:16 |
You ever have to go into somebody else's
project and take a look at what they've
| | 02:19 |
been working on.
If they have flexbox, it's very helpful to
| | 02:22 |
know which version of the syntax they were
using.
| | 02:25 |
So he has a brief overview here that talks
about the syntax, when you can tell that
| | 02:28 |
they're using older syntax versus newer
syntax, and how to identify when they're
| | 02:32 |
using newer versus older syntax.
One of my favorite articles on flexbox is
| | 02:39 |
by Chris Mills.
And if you go out to developer.opera.com,
| | 02:44 |
you'll find his article Flexbox: fast
track to layout nirvana?
| | 02:48 |
And of course, it's a question mark.
So, it gives a nice overview about
| | 02:52 |
flexbox, how it works, and some of the use
case scenarios for it.
| | 02:56 |
This is an incredibly detailed article,
and one that you can dive a little deeper
| | 02:59 |
into flexbox and gain a wealth of
information from.
| | 03:03 |
Highly recommend this one.
Finally, Tab Atkins, the gentleman that
| | 03:07 |
actually wrote the latest version of the
specification, has an article with a very
| | 03:11 |
leading title, Why Flexboxes Aren't Good
for Page Layout.
| | 03:15 |
Now, this was written back in 2010, so you
have to sort of take what he's writing
| | 03:18 |
here with a grain of salt.
But what he writes about is when flexbox
| | 03:22 |
is appropriate and when it isn't.
So it makes the case about when flexbox
| | 03:26 |
and grid systems are implemented, when
those particular layout modules are going
| | 03:30 |
to be the best choice, and how they might
be combined.
| | 03:33 |
So it's a really nice article to read, to
get you up to date with kind of where
| | 03:36 |
we're going layout wise with flexbox and
some of the other newer modules.
| | 03:43 |
Okay, so that's it for now.
Be sure and check out all the other web
| | 03:46 |
design and development titles in the
lynda.com online training library.
| | 03:51 |
Follow me on Twitter to keep track of
where I'll be speaking next, or the
| | 03:54 |
development of my next title.
And I'll see you in my next lynda.com course.
| | 03:59 |
| | Collapse this transcript |
|
|
