Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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
marginvalue ofautohas an effect on flex item alignment because it absorbs any extra space around a flex item and pushes other flex items into different positions.
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 up