- Building a Navigation Bar with Flexbox 7:32
- Creating a Two Column Layout with Flexbox 2:36
- Creating a Three Column Layout with Flexbox 5:24
- Aligning Items to the Bottom of a Column 4:13
- Creating a Sticky Footer with Flexbox 4:58
- Building a Layout with Flexbox 5 questions
- Flexbox Columns Challenge 2 objectives
Preview
Video Player
00:00
00:00
Creating a Sticky Footer with Flexbox
4:58A sticky footer is a footer that sticks to the bottom of the page, regardless of the amount of content on the page. If a page’s content is shorter than the height of the browser, you end up with a footer that sits near the middle of the page, instead of at the bottom. Flexbox is a great solution for fixing these types of problems.
A sticky footer is a footer that
sticks to the bottom of the page
0:00
regardless of the amount
of content on the page.
0:04
If a page's content is shorter
than the height of the browser,
0:07
you end up with a footer that
sits near the middle of the page
0:10
instead of at the bottom where it belongs.
0:13
And because of that,
you sometimes get a big
0:16
undesirable gap between the bottom
of the view port, In the footer.
0:19
This is a common problem in web design.
0:23
Now there are different methods for
creating sticky footers with CSS.
0:26
In the CSS layout basics course,
you learned a popular method that uses
0:31
the CSS calc function, and
the view port relative VH unit, but
0:35
flex boxes flexibility is also a great
solution for these types of problems.
0:40
Other sticky footer methods involve
doing calculations that subtract
0:45
the footer's height from
the total height of the browser.
0:49
Or, other methods involve adding
an extra wrapper div to your site,
0:52
just to force the footer down
to the bottom of the page.
0:56
Well, with flex box, you can make it
work without adding extra elements or
0:59
doing any calculations,
so let me show you how.
1:03
Following a mobile first approach, I'm
going to write these flex box properties
1:06
as base styles outside of any media query.
1:10
So they apply to all screen sizes and
devices.
1:13
So the first thing I'm going to do is make
the body of the page a flex container.
1:16
So I'll target the body, and
set its display body to flex,
1:22
then I'm going to set its
flex direction to column.
1:28
Setting the body's display to flex
1:35
makes the child containers
of the body flex items.
1:37
So now, main header, banner, row,
and main footer are all flex items.
1:40
And setting flex direction to column
stacks the elements vertically.
1:47
Otherwise they're going to be laid
out horizontally on a single line.
1:52
I'll show you what that looks like by
deleting the flex direction declaration.
1:55
Next I'll give the body
a min height of 100vh.
2:07
One vh is equal to one one-hundredth,
or 1%, of the height of the view port.
2:11
So this means that the body's height
will take up at least the entire
2:19
height of the view port.
2:23
Back in the browser nothing
too special happens just yet.
2:25
The element types are still based
on the content inside them, so
2:29
we still get the gap at
the bottom of the page.
2:33
So, now I want the row
container to stretch so
2:36
that it fills all of the free
vertical space inside the body.
2:40
Now we know that the flex-grow and
2:45
flex properties determine how much of the available space inside the flex
container an item should take up.
2:47
So I'll go back to my base styles and
target the row container and
2:53
set its flex value to 1.
2:57
Now here I'm using the flex property, but
3:00
you can also use the flex-grow property
and it will work the same way.
3:02
So now the row stretches to
fill all the available space.
3:08
So it pushes the footer down to
the bottom of the view port.
3:11
And that's pretty much it.
3:15
Now, other sticky footer methods work well
only when the footer has a fixed height.
3:16
What's great about the flex box method
is that you can have a flexible
3:21
multi lined footer in your layout.
3:25
So for instance if I go back
to my index.html file and
3:27
paste some text inside the footer.
3:31
So here i'm pasting a long paragraph,
notice how the footer
3:34
remains in the same place without
dropping below the view port height.
3:38
The Flexbox features you learned in this
course give you a new set of tools for
3:43
building websites and applications.
3:47
I encourage you to
experiment with Flexbox and
3:49
use it wherever you can in your layouts.
3:51
If you wanna practice what
you learned in this course,
3:53
you can convert a website layout
built with CSS floats, displays, or
3:55
positioning to a responsive
Flexbox layout.
4:00
Or you can build the additional pages for
the Best City Guide website using flexbox.
4:03
Try redesigning parts of your
website using flexbox properties.
4:08
You can start by implementing a sticky
footer, or build the navigation in
4:11
columns with flexbox like you
did earlier in this section.
4:15
Or you can use the files
from this course and
4:18
simply experiment with all
the flexbox properties.
4:20
For example you can change the direction
and alignment of properties of
4:24
some of the Flex containers, or the order
and Flex properties of Flex items.
4:28
Just to see how they affect the layout.
4:32
Remember Flexbox doesn't have to entirely
replace your current layout methods, but
4:34
you can use it to improve
upon how you build layouts.
4:39
And if you create something awesome
don't forget to share your work and
4:42
inspire your peers in
the Treehouse Community.
4:44
We're always here to help.
4:47
So if you have questions about
anything covered in this course
4:48
feel free to reach out to the Treehouse
staff, other students, or
4:52
you can get ahold of me on Twitter.
4:55
I'm at guilh
4:56