3-column CSS Flexbox layout

3-column-css-flexbox-layout.markdown

3-column CSS Flexbox layout

A Pen by Rob on CodePen.

License.

index.html

<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>

style.css

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;
}