Building better app layouts

I’ve been writing CSS for over ten years and I’m glad to finally see there’s a way to create a fixed navigation that doesn’t feel like a hack. Among other issues, normally you would need to add ghost padding or margins to account for the fixed positioning. Thanks to the adoption of Flexbox that should be a thing of the past.

I’m working on a design for an App-ified PWA version of my blog and wanted to try something different with the navigation. My design has a navigation bar fixed to the bottom of small screens for easy and comfortable access while maintaining a conventional navigation at the top of the screen for large ones. I thought that would be perfect for Flexbox and there’s no better way to see how it feels than to mock it up.

With my trusted CSS Tricks guide at hand I made my way to Codepen and created a prototype to try it out. I used Flexbox to create two panes that take up all the space on the screen. One with a fixed height for the navigation and another big stretchy one for the content. It was easy for me to change the position of the navigation on different screen sizes thanks to Flexbox’s ability to change the direction columns flow.

The code

This is the code I used to make it work:

HTML

<div class="navigation">
  ... navigation goes here
</div>

<div class="content">
  ... content goes here
</div>

CSS

html {
  height: 100%
}

body {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
}

@media (max-width: 850px) {
  body {
    flex-direction: column;
  }
}

.content {
  flex-grow: 1;
  overflow-y: auto;
}

The prototype

Head on over to Codepen, check it out for yourself, and let me know what you think in the comments below.
View the prototype