Flexbox Holy Grail Starter

flexbox-holy-grail-starter.markdown

Flexbox Holy Grail Starter

Example from: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

A Pen by Sourabh Bagrecha on CodePen.

License.

index.html

<header>
  <h1 style="text-align: center; font-size: 50px; ">Material name:</h1>
  <p style="text-align: center; font-size: 20px;"><a href="#">Published by:</a></p>
  <p>Published on:</p>

</header>
<main>
  <article>
    <div class="content">
      <div class="content-main">
        <div id="lazy-container">
          <img class="lazy" src="https://images.unsplash.com/photo-1516865622081-e98d705bb920?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8e453c06501d9fb07a1d9e4d598410be&dpr=1&auto=format&fit=max&w=500&q=60&cs=tinysrgb" data-src="https://images.unsplash.com/photo-1496478981722-3ae516118a04?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=777bc73a858aa232c20d8433c605a895&w=1000&q=80"
            alt="">
          <img class="lazy" data-src="https://images.unsplash.com/photo-1496478981722-3ae516118a04?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=777bc73a858aa232c20d8433c605a895&w=1000&q=80" src="https://placehold.it/600x350&text=Placeholder" alt="">
          <img class="lazy" data-src="https://images.unsplash.com/photo-1496478981722-3ae516118a04?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=777bc73a858aa232c20d8433c605a895&w=1000&q=80" src="https://placehold.it/600x350&text=Placeholder" alt="">
          <img class="lazy" data-src="https://images.unsplash.com/photo-1496478981722-3ae516118a04?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=777bc73a858aa232c20d8433c605a895&w=1000&q=80" src="https://placehold.it/600x350&text=Placeholder" alt="">
          <img class="lazy" data-src="https://images.unsplash.com/photo-1496478981722-3ae516118a04?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=777bc73a858aa232c20d8433c605a895&w=1000&q=80" src="https://placehold.it/600x350&text=Placeholder" alt="">
          <img class="lazy" data-src="https://images.unsplash.com/photo-1496478981722-3ae516118a04?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=777bc73a858aa232c20d8433c605a895&w=1000&q=80" src="https://placehold.it/600x350&text=Placeholder" alt="">
          <img class="lazy" data-src="https://images.unsplash.com/photo-1496478981722-3ae516118a04?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=777bc73a858aa232c20d8433c605a895&w=1000&q=80" src="https://placehold.it/600x350&text=Placeholder" alt="">
          <img class="lazy" data-src="https://images.unsplash.com/photo-1496478981722-3ae516118a04?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=777bc73a858aa232c20d8433c605a895&w=1000&q=80" src="https://placehold.it/600x350&text=Placeholder" alt="">
          <img class="lazy" data-src="https://images.unsplash.com/photo-1496478981722-3ae516118a04?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=777bc73a858aa232c20d8433c605a895&w=1000&q=80" src="https://placehold.it/600x350&text=Placeholder" alt="">
        </div>
      </div>
    </div>
  </article>
  <nav>SIDE NAV</nav>
  <aside>ASIDE</aside>
</main>
<footer>FOOTER</footer>

script.js

    $(function() {
        $('#lazy-container .lazy').lazy({
            appendScroll: $('#lazy-container')
        });
    });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>

style.css

header{
  border: 2px black solid;
}
main{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  min-height: 800px;
}
article{
  order: 2;
  border: 2px black solid;
  flex-grow: 3;
}
nav{
  order: 1;
  border: 2px black solid;
  flex-grow: 1;
}
aside{
  order: 3;
  border: 2px black solid;
  flex-grow: 1;
}
footer{
  border: 2px black solid;
  height: 90px;
}
.content-main{
  height: 80vh;
  width: 60vw;
  overflow-y: scroll;
  margin: 0 auto;
}
img{
  width: 100%;
}
body{
  margin: 0px;
}
img{
  margin: 0;
}

@media screen and (max-width: 1100px){
  main{
    flex-direction: column;
  }
  article{
    order: 2;
  }
  nav{
    order: 1;
  }
  aside{
    order: 3;
  }
  .content-main{
  height: 80vh;
  width: 80vw;
  overflow-y: scroll;
  float: right;   
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/slider-pro/1.4.0/css/slider-pro.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css" rel="stylesheet" />