"Node.js Basics 2017" was retired on September 1, 2022. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Flexbox Layout!
You have completed CSS Flexbox Layout!
Preview
A common problem web designers and developers face when building layouts is figuring out how to align elements with the bottom edge of a container, regardless of the amount of content inside the container.
Video review
- An element can be both a flex item and a flex container.
- A
marginvalue ofautoaffects flex item alignment because it absorbs any extra space around a flex item and pushes other flex items into different positions.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
One common problem Web Designers and
Developers face when building layouts
0:00
is figuring out how to align elements
with the bottom-edge of a container.
0:04
Regardless of the amount of
content inside the container.
0:09
Like this, now using floats or
other layout methods, it's really
0:12
tricky to align content to the bottom
of a container, but not with flex box.
0:17
So let me show you how.
0:22
You can follow along using
the latest workspace,
0:23
just launch the workspace on this page.
0:25
Or download the project files
to use your own text editor.
0:27
When you preview the index.html
page in a browser,
0:30
you'll see three equal height
columns containing a heading,
0:34
some paragraphs, and
a fancy button below the paragraphs.
0:38
Now the column on the right contains
the most amount of content.
0:42
These columns are flex items,
so the first and
0:46
second column stretch to match
the height of the third column.
0:48
But you'll see that each
column also has a button
0:52
that appears below
the content in each column.
0:55
Now the design would have
more visual consistency
0:58
if the three buttons all aligned
along the bottom edge of the columns,
1:02
even when the text in
each column is different.
1:06
So flex box makes aligning these
buttons to the bottom super simple.
1:09
I'll show you how.
1:14
In flexbox.css the parent row
is already a flex container.
1:15
Its display value is set to flex which,
1:20
as you know, makes all three
columns equal in height by default.
1:23
Now earlier in this section you
learned that it's possible for
1:28
an element to be both a flex item and
a flex container.
1:31
So now I'll need to make the columns
flex containers so that I can have
1:35
full control over the direction and
alignment of the content inside them.
1:40
So to make the columns a flex container,
I'll simply group the class col
1:44
with the other flex container
classes in the media query.
1:49
Now each column is a flex container.
1:53
So that means that the heading,
1:56
paragraphs and
buttons inside them are all flex items.
1:58
Now flex containers display their children
flex items horizontally, by default.
2:03
So now the heading, paragraphs and
buttons are laid out on the same line.
2:08
This is an easy adjustment.
2:12
To fix this, I'll go over to the .col
rule inside the top media query,
2:15
and I'll set the flex-direction
value to column.
2:20
Now the flex items are vertically
stacked inside their columns.
2:27
But this doesn't solve
the button alignment problem.
2:33
By now you know that a margin value of
auto has an effect on flex item alignment,
2:36
because it absorbs any extra
space around a flex item and
2:41
pushes other flex items
into different positions.
2:44
So, see if you can figure out what we
need to do to align the buttons to
2:47
the bottom of each column.
2:51
Back inside the top media query,
3:01
I'm going to create a new rule that
targets the button flex items.
3:04
And give them a margin top property.
3:11
When I set the value to auto.
3:15
[SOUND] Nice!
3:17
It pins the buttons to
the bottom of the columns.
3:19
The browser automatically inserts
the extra space in a column
3:23
between the button and
the flex item above it.
3:27
Now if you don't want your buttons to
stretch the full width of a column
3:32
you can change their alignment on the
cross axis using the align-self property.
3:37
So back inside the button
rule I'll add the align-self
3:42
property and I'll set the value to flex-start.
3:46
Which aligns the buttons to
the left edge of the columns.
3:53
Now, if I want to align them to the right
edge, I can use the value flex-end.
3:57
[SOUND] Great.
4:03
So, in the next video, I'll show you
the quickest and easiest method for
4:06
creating a sticky footer in your layout.
4:10
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up