Skip to content

Instantly share code, notes, and snippets.

@mjgartendev

mjgartendev/flexbox-holy-grail-layout.markdown

Last active June 20, 2018 04:36
Show Gist options
  • Save mjgartendev/a457d3292812cda420cbff4cbb9654f9 to your computer and use it in GitHub Desktop.
Save mjgartendev/a457d3292812cda420cbff4cbb9654f9 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox Holy Grail Layout
Raw
index.html
<body class="app">
<header class="app-header">Header</header>
<div class="app-body">
<main class="app-content">Main</main>
<nav class="app-nav">Nav</nav>
<aside class="app-ads">Ads</aside>
</div>
<footer class="app-footer">Footer</footer>
</body>
Raw
style.css
.app {
display: flex;
min-height: 100vh;
flex-direction: column;
text-align: center;
color: #35495E;
font-weight: bold;
margin: 0;
padding: 0;
}
.app-header {
border: 1px solid #ccc;
padding: 1%;
background: #41B883;
}
.app-footer {
border: 1px solid #ccc;
padding: 1%;
background: #41B883;
}
.app-body {
display: flex;
flex: 1;
background: #41B883;
}
.app-content {
flex: 1;
border: 1px solid #ccc;
background: #35495E;
color: #ddd;
}
.app-nav, .app-ads {
/* 12em is the width of the columns */
flex: 0 0 12em;
border: 1px solid #ccc;
padding: 1%;
background: #35495E;
color: #ddd
}
.app-nav {
/* put the nav on the left */
order: -1;
}
.app-body {
display: flex;
flex-direction: column;
}
.app-nav {
order: -1;
}
@media (min-width: 768px) {
.app-body {
flex-direction: row;
flex: 1;
}
.app-content {
flex: 1;
}
.app-nav, .app-ads {
/* 12em is the width of the columns */
flex: 0 0 12em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment