Holy Grail with Flexbox

by Anchit Gupta

HTML

<div class="main-container">
    <header class="header-container">
      <h1 class="heading-text">Heading</h1>
    </header>
    <div class="main-content-container">
      <nav class="menu-section common-section">
        <div class="menu-heading">
          <span class="menu-text">Menu</span>
        </div>
        <ul class="items-list">
          <li class="item-1 common-item">item 1</li>
          <li class="item-2 common-item">item 2</li>
          <li class="item-3 common-item">item 3</li>
          <li class="item-4 common-item">item 4</li>
        </ul>
      </nav>
      <div class="content-section common-section">
        <div class="content-heading">
          <h2 class="content-text">Content</h2>
        </div>
        <div class="content-info-container">
          <span class="content-info-text">Lorem ipsum.....</span>
        </div>
      </div>
      <aside class="ad-container common-section">
        Ad...
      </aside>
    </div>
    <footer class="footer-container">
      <span class="footer-text">Footer</span>
    </footer>
  </div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.main-container{
  border: 1px solid #000;
  display: flex;
  flex-flow: column wrap;
  .header-container{
    background: tomato;
    text-align: center;
  }
  .main-content-container{
    display: flex;
    flex-wrap: wrap;
    .menu-section{
      background: green;
      flex: 1;
    }
    .content-section{
      background: deepskyblue;
      flex: 2;
    }
    .ad-container{
      background: yellow;
      flex: 1;
    }
    .common-section{
      /* flex: 1; */
    }
  }
  .main-content-container > * {
    padding: 10px;
  }
  .footer-container{
    background: purple;
    text-align: center;
    padding: 10px;
  }
}

@media only screen and (max-width: 767px){
  .main-content-container{
    flex-direction: column;
    .content-section{
      order: -1;
    }
  }
}