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