Skip to content

Instantly share code, notes, and snippets.

@robv8r
Created March 25, 2018 23:41
Show Gist options
  • Save robv8r/782110b9aa5291e3c4662145ba9ea871 to your computer and use it in GitHub Desktop.
Save robv8r/782110b9aa5291e3c4662145ba9ea871 to your computer and use it in GitHub Desktop.
3-column CSS Flexbox layout
<div class="wrapper">
<header class="header">Header: Fixed height</header>
<section class="content">
<div class="columns">
<main class="main">Content: Flexible width</main>
<aside class="sidebar-first">Sidebar first: Fixed width</aside>
<aside class="sidebar-second">Sidebar second: Fixed width</aside>
</div>
</section>
<footer class="footer">Footer: Fixed height</footer>
</div>
body{
margin: 0;
}
.wrapper{
min-height: 100vh;
background: #ccc;
display: flex;
flex-direction: column;
}
.header, .footer{
height: 50px;
background: #666;
color: #fff;
}
.content {
display: flex;
flex: 1;
background: #999;
color: #000;
}
.columns{
display: flex;
flex:1;
}
.main{
flex: 1;
order: 2;
background: #eee;
}
.sidebar-first{
width: 20%;
background: #ccc;
order: 1;
}
.sidebar-second{
width: 20%;
order: 3;
background: #ddd;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment