A 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 where it belongs.

And because of that, you sometimes get a big

undesirable gap between the bottom of the view port, In the footer.

This is a common problem in web design.

Now there are different methods for creating sticky footers with CSS.

In the CSS layout basics course, you learned a popular method that uses

the CSS calc function, and the view port relative VH unit, but

flex boxes flexibility is also a great solution for these types of problems.

Other sticky footer methods involve doing calculations that subtract

the footer's height from the total height of the browser.

Or, other methods involve adding an extra wrapper div to your site,

just to force the footer down to the bottom of the page.

Well, with flex box, you can make it work without adding extra elements or

doing any calculations, so let me show you how.

Following a mobile first approach, I'm going to write these flex box properties

as base styles outside of any media query.

So they apply to all screen sizes and devices.

So the first thing I'm going to do is make the body of the page a flex container.

So I'll target the body, and set its display body to flex,

then I'm going to set its flex direction to column.

Setting the body's display to flex

makes the child containers of the body flex items.

So now, main header, banner, row, and main footer are all flex items.

And setting flex direction to column stacks the elements vertically.

Otherwise they're going to be laid out horizontally on a single line.

I'll show you what that looks like by deleting the flex direction declaration.

Next I'll give the body a min height of 100vh.

One vh is equal to one one-hundredth, or 1%, of the height of the view port.

So this means that the body's height will take up at least the entire

height of the view port.

Back in the browser nothing too special happens just yet.

The element types are still based on the content inside them, so

we still get the gap at the bottom of the page.

So, now I want the row container to stretch so

that it fills all of the free vertical space inside the body.

Now we know that the flex-grow and

flex properties determine how much of the available space inside the flex container an item should take up.

So I'll go back to my base styles and target the row container and

set its flex value to 1.

Now here I'm using the flex property, but

you can also use the flex-grow property and it will work the same way.

So now the row stretches to fill all the available space.

So it pushes the footer down to the bottom of the view port.

And that's pretty much it.

Now, other sticky footer methods work well only when the footer has a fixed height.

What's great about the flex box method is that you can have a flexible

multi lined footer in your layout.

So for instance if I go back to my index.html file and

paste some text inside the footer.

So here i'm pasting a long paragraph, notice how the footer

remains in the same place without dropping below the view port height.

The Flexbox features you learned in this course give you a new set of tools for

building websites and applications.

I encourage you to experiment with Flexbox and

use it wherever you can in your layouts.

If you wanna practice what you learned in this course,

you can convert a website layout built with CSS floats, displays, or

positioning to a responsive Flexbox layout.

Or you can build the additional pages for the Best City Guide website using flexbox.

Try redesigning parts of your website using flexbox properties.

You can start by implementing a sticky footer, or build the navigation in

columns with flexbox like you did earlier in this section.

Or you can use the files from this course and

simply experiment with all the flexbox properties.

For example you can change the direction and alignment of properties of

some of the Flex containers, or the order and Flex properties of Flex items.

Just to see how they affect the layout.

Remember Flexbox doesn't have to entirely replace your current layout methods, but

you can use it to improve upon how you build layouts.

And if you create something awesome don't forget to share your work and

inspire your peers in the Treehouse Community.

We're always here to help.

So if you have questions about anything covered in this course

feel free to reach out to the Treehouse staff, other students, or

you can get ahold of me on Twitter.

I'm at guilh