In this tutorial, we’ll learn how to build a full-screen responsive page with flexbox. Our page will include a full-screen background image, vertically centered content, and a sticky footer.
Here’s a quick look at the page we’re going to build (the full screen version might give you a better idea):
Note: this tutorial assumes you have some understanding of flexbox. For beginner resources, take a look at these tutorials and courses:
- FlexboxA Comprehensive Guide to Flexbox AlignmentAnna Monus
- FlexboxA Comprehensive Guide to Flexbox Ordering & ReorderingAnna Monus
- FlexboxCSS: Flexbox EssentialsCraig Campbell
- CSS6 Flexbox Projects for Web DesignersCraig Campbell
1. Define the Container
We begin by defining a container, in which we place three elements. A header
, a main
, and a footer
. Here’s the page structure:
<div class="wrapper"> <header class="page-header"> <!-- content here --> </header> <main class="page-main"> <!-- content here --> </main> <footer class="page-footer"> <!-- content here --> </footer> </div>
We want the page to be at least full-screen, but when the page height is greater than the browser window height, we want a scrollbar to appear.
Thanks to flexbox, we’re able to create this functionality very easily. Here’s the required CSS:
.wrapper { display: flex; flex-direction: column; min-height: 100vh; } .wrapper > * { padding: 20px; } .page-main { flex-grow: 1; }
By setting flex-grow: 1
on the main
element, it expands to cover the available space inside the flex container. The header
and footer
elements have their default widths based on their content.
Internet Explorer Caveat
Some versions of Internet Explorer don’t work well when a flex container has a minimum height. In our example (if you’re interested in supporting IE), one way to solve this issue is to add the following rule:
body { display: flex; flex-direction: column; }
Another straightforward workaround is to replace the min-height: 100vh
with height: 100vh
.
In any case, if there’s a need to support IE in your projects, choose the method that works best for your content and layout.
Progress so Far
Here’s the starting pen we’ve built (including some colors for clarity):
Let’s now have a closer look at the container’s descendants.
2. The Header
Our page header includes three elements. The logo, the navigation, and a call-to-action button. Here’s the header markup:
<header class="page-header"> <nav> <h2 class="logo"> LOGO </h2> <ul> <!-- list items here --> </ul> <button class="cta-contact"> get in touch </button> </nav> </header>
Its layout changes depending on the viewport size. On narrow screens (<550px), it looks like this:

On wider screens, the layout changes as follows:

To achieve this slight layout shift our styles have to fulfill the requirements below:
- The elements should be vertically aligned.
- On small screens the menu should be the last element, while on wider screens the button should be the last one.
- On small screens the header elements are wrapped into two lines. The navigation itself covers the second line. On larger screens all elements are evenly distributed in a single row.
Following a mobile-first approach, let’s look at the most crucial rules for our header:
.page-header nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .page-header ul { display: flex; order: 1; width: 100%; margin-top: 15px; } @media screen and (min-width: 550px) { .page-header ul { width: auto; margin-top: 0; } .page-header .cta-contact { order: 1; } }
Tip: the default order
value of the flex elements is 0
. Elements with same order
values are laid out according to the order they appear in the source document. For this reason the button comes after the navigation on wide screens (≥ 550px).
3. The Main Content
The main content of our page consists of some text which is vertically centered and sits on top of a background image.

Here’s the structure for this section:
<main class="page-main"> <div> <!-- content here --> </div> </main>
And the most important styles, including CSS variables:
/* variables */ :root { --main-white-color: white; --main-purple-color: #9e89b8; } .page-main { display: flex; flex-direction: column; justify-content: center; min-height: 350px; background: var(--main-purple-color) url(IMG_SRC) no-repeat center / cover; background-blend-mode: luminosity; color: var(--main-white-color); } .page-main div { max-width: 500px; } @media screen and (min-width: 768px) { .page-main { padding-left: 90px; } }
Nothing very complicated happens here. Again, thanks to flexbox we’re able to vertically center the main
contents. Plus just for fun, we apply a blend mode in the browsers that support it.
4. The Footer
The page footer includes two elements; one which holds copyright information, and another with links to social media channels. Here’s the markup:
<footer class="page-footer"> <small> <!-- content here --> </small> <ul> <!-- list items here --> </ul> </footer>
Again, the layout here should change depending on the viewport size.
On narrow screens (<550px), it looks like this:

On wider screens, the layout is as follows:

Considering the screenshots above, the following things should happen:
- On small screens the text should be the last element, while on wider screens the social profiles list should be the last one.
- On small screens the footer elements are wrapped into two lines. On the other hand, on larger screens all elements are vertically centered and evenly distributed in a single row.
The main styles for our footer:
.page-footer { display: flex; flex-direction: column-reverse; } .page-footer ul { display: flex; font-size: 1.5rem; margin-bottom: 5px; } @media screen and (min-width: 550px) { .page-footer { flex-direction: row; justify-content: space-between; align-items: center; } .page-footer ul { margin-bottom: 0; } }
Icons
Last but not least, for the icons used in this section I’ve incorporated the Ionicons icon pack into our pen.

Conclusion
In this tutorial we covered the process of creating a full-screen responsive page with flexbox. The process was straightforward and gave us the opportunity to practice a few different flexbox skills.
In an upcoming tutorial, we’ll go one step further and examine how to animate the elements on this page. See you then!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post