Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Flexbox Layout

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Creating a Sticky Footer with Flexbox

4:58 with Guil Hernandez

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. Flexbox is a great solution for fixing these types of problems.

Resources

Video review

  • When you make body a flex container, it lays out all its direct children horizontally on a single line.
  • Setting the flex-direction of body to column stacks its flex items vertically.
  • 1vh is equal to 1/100th or 1% of the viewport height.
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.row {
  flex: 1;
}

Alternate sticky footer method 

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-footer {
  margin-top: auto;
}

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

You need to sign up for Treehouse in order to download course files.

Sign up