17+ CSS Flexbox Layout Examples

This post contains a total of 17+ CSS Flexbox Layout Examples with Source Code. All these Flexbox Layouts are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Flexbox Layout Examples

1. FlexBox Exercise Image carousel

Made by Veronica. FlexBox Image carousel Layout with sliding effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

* {
  box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
  -webkit-justify-content: center;
    align-items: center;
  -webkit-align-items: center;
}

body {
    background-color: #eaeaea;
}

.carousel {
    width: 100%;
    height: 100%;
    display: flex;
    max-width: 900px;
    max-height: 550px;   
    overflow: hidden;
  position: relative;
}

.carousel-item {
  visibility:visible;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
      -webkit-align-items: center;
    -webkit-justify-content: flex-end;
    position: relative;
    background-color: #fff;
    flex-shrink: 0;
   -webkit-flex-shrink: 0;
    position: absolute;
    z-index: 0;
  transition: 0.6s all linear;
}

.carousel-item__info {
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  
    display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-flex-direction: column;
  
  order: 1;
  left: 0;
  margin: auto;
  padding: 0 40px;
  width: 40%;

}

.carousel-item__image {
    width: 60%;
    height: 100%;
    order: 2;
    align-self: flex-end;
    flex-basis: 60%;
  
      -webkit-order: 2;
    -webkit-align-self: flex-end;
    -webkit-flex-basis: 60%;
  
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   position:relative;
  transform: translateX(100%);
  transition: 0.6s all ease-in-out;
}

.carousel-item__subtitle {
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 3px;
    font-size: 10px;
    text-transform: uppercase;
    margin: 0;
    color: #7E7E7E;    
    font-weight: 700;
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s all ease-in-out;
}

.carousel-item__title {
    margin: 15px 0 0 0;
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    line-height: 45px;
    letter-spacing: 3px;
    font-weight: 700;
    color: #2C2C2C;
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
}

.carousel-item__description {
    transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
    margin-top: 35px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #7e7e7e;
    line-height: 22px;
    margin-bottom: 35px;
}

.carousel-item--1 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/991012/pexels-photo-991012.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
}


.carousel-item--2 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/921294/pexels-photo-921294.png?auto=compress&cs=tinysrgb&h=750&w=1260');
}

.carousel-item--3 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/92733/pexels-photo-92733.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
}

.carousel-item--4 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/1008732/pexels-photo-1008732.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
}

.carousel-item--5 .carousel-item__image{
  background-image: url('https://images.pexels.com/photos/1029614/pexels-photo-1029614.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
}




.carousel-item__container{

}

.carousel-item__btn {
    width: 35%;
    color: #2C2C2C;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 3px;
    font-size: 11px;
    text-transform: uppercase;
    margin: 0;
    width: 35%;
    font-weight: 700;
  text-decoration: none;
      transform: translateY(25%);
    opacity: 0;
    visibility: hidden;
    transition: 0.6s all ease-in-out;
}

.carousel__nav {
    position: absolute;
    right: 0;
    z-index: 2;
    background-color: #fff;
  bottom: 0;
}

.carousel__icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
  fill: #5d5d5d;
}

.carousel__arrow {
    cursor: pointer;
    display: inline-block;
    padding: 11px 15px;
    position: relative;
}

.carousel__arrow:nth-child(1):after {
    content:'';
    right: -3px;
    position: absolute;
    width: 1px;
    background-color: #b0b0b0;
    height: 14px;
    top: 50%;
    margin-top: -7px;
}

.active{
   z-index: 1;
  display: flex;
  visibility:visible;
}

.active .carousel-item__subtitle, .active .carousel-item__title, .active .carousel-item__description,.active .carousel-item__btn{
    transform: translateY(0);
    opacity: 1;
  transition: 0.6s all ease-in-out;
    visibility: visible;
}



.active .carousel-item__image{ 
transition: 0.6s all ease-in-out;
transform: translateX(0);
}
</style>
</head>
<body>
<div class="carousel">
  <div class="carousel__nav">
   <span id="moveLeft" class="carousel__arrow">
        <svg class="carousel__icon" width="24" height="24" viewBox="0 0 24 24">
    <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path>
</svg>
    </span>
    <span id="moveRight" class="carousel__arrow" >
      <svg class="carousel__icon"  width="24" height="24" viewBox="0 0 24 24">
  <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg>    
    </span>
  </div>
  <div class="carousel-item carousel-item--1">
    <div class="carousel-item__image"></div>
    <div class="carousel-item__info">
      <div class="carousel-item__container">
      <h2 class="carousel-item__subtitle">The grand moment </h2>
      <h1 class="carousel-item__title">Le tour</h1>
      <p class="carousel-item__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      <a href="#" class="carousel-item__btn">Explore the tour</a>
        </div>
    </div>
  </div>
  <div class="carousel-item carousel-item--2">
    <div class="carousel-item__image"></div>
    <div class="carousel-item__info">
      <div class="carousel-item__container">
      <h2 class="carousel-item__subtitle">The big window </h2>
      <h1 class="carousel-item__title">Minimal window</h1>
      <p class="carousel-item__description">Clear Glass Window With Brown and White Wooden Frame iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      <a href="#" class="carousel-item__btn">Read the article</a>
        </div>
    </div>
  </div>
    <div class="carousel-item carousel-item--3">
    <div class="carousel-item__image"></div>
    <div class="carousel-item__info">
      <div class="carousel-item__container">
      <h2 class="carousel-item__subtitle">Tropical palms </h2>
      <h1 class="carousel-item__title">Palms</h1>
      <p class="carousel-item__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      <a href="#" class="carousel-item__btn">Explore the palms</a>
        </div>
    </div>
  </div>
  
   <div class="carousel-item carousel-item--4">
    <div class="carousel-item__image"></div>
    <div class="carousel-item__info">
      <div class="carousel-item__container">
      <h2 class="carousel-item__subtitle">Beach </h2>
      <h1 class="carousel-item__title">The beach </h1>
      <p class="carousel-item__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      <a href="#" class="carousel-item__btn">Explore the beach</a>
        </div>
    </div>
  </div>
  
 <div class="carousel-item carousel-item--5">
    <div class="carousel-item__image"></div>
    <div class="carousel-item__info">
      <div class="carousel-item__container">
      <h2 class="carousel-item__subtitle">The white building </h2>
      <h1 class="carousel-item__title">White building</h1>
      <p class="carousel-item__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      <a href="#" class="carousel-item__btn">Read the article</a>
        </div>
    </div>
  </div>
  
</div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script id="rendered-js" >
$(function () {
  $('.carousel-item').eq(0).addClass('active');
  var total = $('.carousel-item').length;
  var current = 0;
  $('#moveRight').on('click', function () {
    var next = current;
    current = current + 1;
    setSlide(next, current);
  });
  $('#moveLeft').on('click', function () {
    var prev = current;
    current = current - 1;
    setSlide(prev, current);
  });
  function setSlide(prev, next) {
    var slide = current;
    if (next > total - 1) {
      slide = 0;
      current = 0;
    }
    if (next < 0) {
      slide = total - 1;
      current = total - 1;
    }
    $('.carousel-item').eq(prev).removeClass('active');
    $('.carousel-item').eq(slide).addClass('active');
    setTimeout(function () {

    }, 800);



    console.log('current ' + current);
    console.log('prev ' + prev);
  }
});
    </script>
</body>
</html>

2. Flexbox Basic Example

Made by Abbey Fitzgerald. Basic Flexbox Layout. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
  
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

body {
    background-color: #eee;
    color: #434344;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

/* Page Layout */

.container {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

/* Header */

header{
    color: #9f9c9c;
    padding: 20px 0;
    margin-bottom: 40px;
    text-transform: uppercase;
    border-bottom: 2px solid #b0e0ea;
    display: flex;
    justify-content: space-between;
}

header nav ul {
    display: flex;
    align-items: baseline;
    list-style-type: none;
}

header nav li {
    margin-right: 15px;
}

header button {
    border: none;
    padding: 8px 25px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    border-radius: 1.25rem;
    background-color: #51bb7b;
}

/* Main Section */

.wrapper {
    display: flex;
}

.main {
    flex: 3;
}

.main h2 {
    font-size: 32px;
    margin: 1rem 0;
    color: #50c6db;
}

.main p {
    font-size: 1rem;
    margin-bottom: .75rem;
}

.main img {
    width: 100%;
}

/* Sidebar */

.sidebar {
    padding: 20px;
    flex: 1;
    margin-right: 60px;
    border-top: 3px solid #693f7e;
    background-color: #f9f9f9;
}

.sidebar ul {
  list-style-type: none;
  margin-top: 1rem;
  font-size: .75rem;
}

.sidebar ul > li {
    padding: .25rem 0;
}

.logo {
  font-size: 2rem;
  margin-right: 1.5rem;
  color: #50c6db;
}

/* Footer */

footer {
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 60px;
    padding: 20px 0;
    background-color: #9f9c9c;
}

footer p {
    color: #434344;
    font-size: 12px;
    padding: 10px;
}


@media (max-width: 600px) {
    .wrapper {
        flex-direction: column;
    }

    .main {
        margin-right: 0;
        margin-bottom: 60px;
    }
}
</style>
</head>
<body>
  <div class="container">
        
    <header>
        <nav>
          <ul>
            <li class="logo"><a href="#"><i class="fa fa-file-code-o" aria-hidden="true"></i>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
        <button>Login</button>
    </header>

    <div class="wrapper">
        <aside class="sidebar">

            <h3>Recent Posts</h3>
        <ul>
            <li><a href="#">Post One</a></li>
            <li><a href="#">Post Two</a></li>
            <li><a href="#">Post Three</a></li>
            <li><a href="#">Post Four</a></li>
            <li><a href="#">Post Five</a></li>
          </ul>
        </aside>
        <section class="main">
          <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/flexbox-header.jpg">
            <h2>Flexbox Layout</h2>
        </section>
    </div>
    <footer>
        <h3>Flexbox Layout Example</h3>
        <p>Hope you enjoyed learning about Flexbox Layouts!</p>
    </footer>
</div>
</body>
</html> 

3. Simple Flexbox Layout for Sidebar + Main Content Area

Made by Mark Conroy. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
.container {
  max-width: 960px;
  margin: auto;
  font-family: sans-serif;
  line-height: 1.5;
}

h2 {
  color: yellow;
}

.flex-grid {
  color: white;
  display: flex;
  margin: auto -1rem 1rem;
}

.col {
  background-color: black;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding: 1rem;
}

.sidebar {
  flex: 1;
}

.main {
  flex: 3;
}
</style>
</head>
<body>
  <div class="container">
  <h1>A Simple Flexbox Layout for Sidebar + Main Content Area</h1>
  <div class="flex-grid">
    <aside class="col sidebar">
      <h2>The Sidebar</h2>
      <p>a</p>
    </aside>
    <section class="col main">
      <h2>The Main Content Area</h2>
      <p>a</p>
    </section>
  </div>
</div>
</body>
</html>

4. Responsive Flexbox Layout with flex-grow & Equal-Width Columns

Made by Dudley Storey. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Merriweather);
@font-face {
  font-family: 'Queens Park';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/queens-park.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}
section { display: flex; }
body > h1 { 
  font-family: Queens Park, serif;
  font-size: 4rem;
  text-align: center; 
}
article { 
  margin: 1rem;
  -ms-flex: 1 0 0px;
  flex: 1; 
  /* shortcut for "flex-grow: 1". Note that it MUST be a unitless value to work; defined with a unit (e.g. flex: 1px) the shortcut would alter the flex-basis property. */
}
article.breaking { 
  -ms-flex-grow: 2; 
  flex: 2; 
  /* shortcut for "flex-grow: 2" */
} 
 
article img { 
  width: 100%; height: auto; 
}
article h1, article h2, article h3 { font-family: Oswald, serif; }
article h1 { 
  font-size: 2rem; 
  line-height: 1.3;
}
article h2, article h3 { 
  font-size: 1.2rem; 
  text-align: right; 
  line-height: 1.3;
  margin: .3rem 0;
  font-weight: 300;
}
article h3 { 
  font-size: 1.1rem; 
}
article p { 
  font-family: Merriweather;
  line-height: 1.6; 
}
@media screen and (max-width: 750px) {
  body > h1 { font-size: 3rem; }
  section { 
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    flex-direction: column; 
  }
}
</style>
</head>
<body>
  <h1>The Fortean World Times</h1>
<section>
<article class="breaking">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/earth-vs-the-flying-saucers.jpg" alt="Photograph of a flying saucer over the US Capitol building">
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <p>Paragraph</p>
  </article>
 <article>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/bigfoot_1.jpg" alt="Photograph of a Bigfoot">
<h1>H1</h1>
<h2>H2</h3>
<p>Paragraph</p>
</article>
<article>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/alligator-sewer_1.jpg" alt="Photograph of an alligator emerging from an open manhole cover">
<h1>H2</h1>
<h2>H2</h2>
<h3>H3</h3>
<p>Paragraph</p>
</article>
</section>
  
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>  
</body>
</html>

5. Flexbox Cards Layout

Made by Jeff Kinley. Simple Flexbox Cards layout. Source

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title>CodePen - Flexbox Cards Layout</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #eee;
}

.container {
  padding: 1rem 1rem;
  max-width: 1200px;
  min-width: 320px;
  margin: 0 auto;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  padding: 1rem;
  background: #fff;
  color: #202020;
  border-radius: 5px;
  border: 1px solid #ccc;
  opacity: 0.9;
}

li:hover {
  box-shadow: 1px 2px 3px 0px rgba(25, 25, 25, 0.6);
  opacity: 1;
  transition: all 0.5s ease;
}

h1 {
  background-color: #38678f;
  color: #fff;
  padding: 1.25rem;
}

h2 {
  margin: 0;
}

p {
  color: #555;
  line-height: 1.5;
}

img {
  width: 100%;
  margin-bottom: 1.5rem;
  border-radius: 5px;
}

/* Flexbox Styling */
/* Inspired by https://www.aaron-gustafson.com/notebook/playing-with-flexbox-and-quantity-queries/ */
.item-list {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 100%;
  margin: 0 0 1.25rem;
}

@media (min-width: 36em) {
  .item {
    flex: 0 0 calc( 50% - 1.25rem / 2 );
    margin-left: 1.25rem;
  }

  .item:nth-child(odd) {
    margin-left: 0;
  }
}
@media (min-width: 60em) {
  .item {
    flex: 0 0 calc(100% / 3 - 0.875rem);
  }

  .item:nth-child(odd), item:nth-child(even) {
    margin-left: 1.25rem;
  }

  .item:nth-child(3n+1) {
    margin-left: 0;
  }
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body translate="no" >
  <div class="container">
  <header>
    <h1>Flexbox Cards Layout</h1>
  </header>
  <ul class="item-list">

    <li class="item item1">
      <img src="https://source.unsplash.com/B1amIgaNkwA/480x320/">
      <div class="item-text">
        <h2>Item 1</h2>
        <p>Paragraph</p>
      </div>
    </li>

    <li class="item item2">
      <img src="https://source.unsplash.com/xcC5ozHk_N8/480x320/">
      <div class="item-text">
        <h2>Item 2</h2>
        <p>Paragraph</p>
      </div>
    </li>
    <li class="item item3">
      <img src="https://source.unsplash.com/mWRR1xj95hg/480x320/">
      <div class="item-text">
        <h2>Item 3</h2>
        <p>Paragraph</p>
      </div>
    </li>
    <li class="item item4">
      <img src="https://source.unsplash.com/yEOCA6oiVqg/480x320/">
      <div class="item-text">
        <h2>Item 4</h2>
        <p>Paragraph</p>
      </div>
    </li>
    <li class="item item5">
      <img src="https://source.unsplash.com/VB-w_3dnyvI/480x320/">
      <div class="item-text">
        <h2>Item 5</h2>
        <p>Paragraph</p>
      </div>
    </li>
    <li class="item item6">
      <img src="https://source.unsplash.com/yOujaSETXlo/480x320/">
      <div class="item-text">
        <h2>Item 6</h2>
        <p>Paragraph</p>
      </div>
    </li>
    <li class="item item7">
      <img src="https://source.unsplash.com/NKSGuJzExIo/480x320/">
      <div class="item-text">
        <h2>Item 7</h2>
        <p>Paragraph</p>
      </div>
    </li>
  </ul>
</div>
</body>
</html>

6. Flexbox Instagram gallery layout

Made by Eric Thayer. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/functional-modifiers.css'>
  
<style>
@charset "UTF-8";
@import url("https://codepen.io/ericthayer/pen/0c7b5f509fe30bb0730e3d89483eaced.css");
@import url("https://fonts.googleapis.com/css?family=Bungee|Bungee+Inline|Bungee+Shade|Rubik+One|Shrikhand|Varela");
@import url("https://fonts.googleapis.com/css?family=Lobster|Merriweather|News+Cycle|Patua+One|Voltaire");
@import url("https://fonts.googleapis.com/css?family=Acme|Alfa+Slab+One|Anton|Archivo+Black|Arvo");
@import url("https://fonts.googleapis.com/css?family=Bevan|Bree+Serif|Hammersmith+One|Josefin+Sans|Kaushan+Script");
@import url("https://fonts.googleapis.com/css?family=Domine|Oswald|Alegreya+Sans|BenchNine|Crete+Round");
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy|Bitter|Montserrat|Raleway|Ranga");
@import url("https://fonts.googleapis.com/css?family=Fjalla+One|Fredoka+One|Quicksand|Sanchez|Yellowtail");
@import url("https://fonts.googleapis.com/css?family=Alice|Chewy|Reem+Kufi|Righteous|Rock+Salt");
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover, [data-tooltip]:focus {
  cursor: help;
}
[data-tooltip]:hover:after, [data-tooltip]:focus:after {
  background: #ccebff;
  box-shadow: 0 0 0 0.25em #99d8ff, 7px 7px 0 rgba(0, 0, 0, 0.5);
  color: #333;
  padding: 0.5em 0.5em;
  position: absolute;
  top: 0;
  left: 1.5rem;
  line-height: 1;
  font-size: 0.875rem;
  text-align: center;
  -webkit-animation: fade-in 0.4s linear forwards;
          animation: fade-in 0.4s linear forwards;
  transition: opacity 0.4s ease;
  z-index: 10000;
  content: attr(data-tooltip);
}
@media (min-width: 30em) {
  [data-tooltip]:hover:after, [data-tooltip]:focus:after {
    min-width: 8em;
  }
}

.skip-link {
  background: var(--action);
  color: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  line-height: 1;
  max-height: 0;
  outline: none;
  overflow: hidden;
  position: sticky;
  text-align: center;
  transition: 0.35s ease;
  width: 100%;
  z-index: 1001;
}
.skip-link:focus {
  box-shadow: none;
  color: #FFF;
  max-height: 6.25em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.no-support {
  background: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-row: 1/1;
  width: 100%;
  z-index: 1;
}
.no-support .close-button {
  background: rgba(0, 0, 0, 0.2);
  color: #FFF;
  font-size: 1rem;
  text-decoration: none;
}

@supports (display: grid) {
  .no-support {
    display: none;
  }
  .no-support > * {
    padding: 1rem;
  }

  #body:target .no-support {
    display: none;
  }
}
.has-tooltip {
  position: relative;
}
.has-tooltip:hover .tooltip, .has-tooltip:focus .tooltip,
.has-tooltip a:focus .tooltip, .has-tooltip:hover .icon-tooltip, .has-tooltip:focus .icon-tooltip,
.has-tooltip a:focus .icon-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tooltip,
.icon-tooltip {
  background-color: hotpink;
  color: #FFF;
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: 0.875rem;
  opacity: 0;
  padding: 0.5rem 1rem 0.65rem;
  position: absolute;
  bottom: 100%;
  left: -100%;
  left: -50%;
  right: -50%;
  visibility: hidden;
  text-align: center;
  transform: translateY(10px);
  transition: all 0.25s ease-out;
  border-radius: 0.2rem;
  z-index: 50;
}
.tooltip::before,
.icon-tooltip::before {
  content: "";
  display: inline-block;
  position: absolute;
  border: 8px solid transparent;
  border-top-color: hotpink;
  bottom: -16px;
  left: calc(50% - 8px);
}
.tooltip.flush-r,
.icon-tooltip.flush-r {
  right: -0.5rem;
  left: auto;
}
.tooltip.flush-r::before,
.icon-tooltip.flush-r::before {
  right: 0.75rem;
  left: auto;
}
.tooltip.flush-l,
.icon-tooltip.flush-l {
  left: -0.5rem;
}
.tooltip.flush-l::before,
.icon-tooltip.flush-l::before {
  left: 0.65rem;
}

.icon-tooltip {
  left: calc(50% - 2.5rem);
  padding-right: 0.25rem;
  padding-left: 0.25rem;
  text-align: center;
  white-space: pre;
  width: 5rem;
}
.icon-tooltip::before {
  bottom: -14px;
}

.clearfix:before, .clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.full-screen {
  min-height: 100vh;
}
.full-screen .banner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-top: 0;
  padding-bottom: 0;
}
.list-unstyled {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.list-unstyled ul {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin-bottom: 0;
  padding-top: 1em;
  padding-bottom: 1em;
}
.list-unstyled ul li:last-child {
  margin-bottom: 0;
}

.list-clean li {
  list-style-type: none;
}

.list-nested {
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 3em;
  width: 100%;
}
.list-nested > li {
  list-style-type: circle;
}

.arrow-list-lg {
  padding: 0;
}
.arrow-list-lg > li {
  display: flex;
}
.arrow-list-lg > li li {
  list-style-type: none;
}
.arrow-list-lg > li:before {
  content: "โ†’ ";
  padding-right: 0.625em;
}

.list-parent {
  flex-wrap: wrap;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}
.grid > * {
  flex-grow: 1;
  padding: 1em;
  flex-basis: 15em;
}
@supports (grid-gap: 0) {
  .grid {
    display: grid;
    grid-gap: 2em;
  }
  .grid > * {
    padding: 0;
  }
  @media (min-width: 40em) {
    .grid {
      grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr));
    }
  }
}

.grid-2-col {
  display: flex;
  flex-wrap: wrap;
}
.grid-2-col > * {
  flex-grow: 1;
  padding: 1em;
  flex-basis: 15em;
}
@supports (grid-gap: 0) {
  .grid-2-col {
    display: grid;
    grid-gap: 2em;
  }
  .grid-2-col > * {
    padding: 0;
  }
  @media (min-width: 40em) {
    .grid-2-col {
      grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr));
    }
  }
}
@supports (grid-gap: 0) {
  @media (min-width: 40em) {
    .grid-2-col {
      grid-gap: 2em 3em;
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

.grid-4-col {
  display: flex;
  flex-wrap: wrap;
}
.grid-4-col > * {
  flex-grow: 1;
  padding: 1em;
  flex-basis: 15em;
}
@supports (grid-gap: 0) {
  .grid-4-col {
    display: grid;
    grid-gap: 2em;
  }
  .grid-4-col > * {
    padding: 0;
  }
  @media (min-width: 40em) {
    .grid-4-col {
      grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr));
    }
  }
}
@supports (grid-gap: 0) {
  .grid-4-col {
    grid-template-columns: repeat(auto-fit, minmax(16.5em, 1fr));
    grid-gap: 2em;
  }
  @media (min-width: 60em) and (max-width: 85em) {
    .grid-4-col {
      grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
    }
  }
}

.grid-lg {
  display: flex;
  flex-wrap: wrap;
}
.grid-lg > * {
  flex-grow: 1;
  padding: 1em;
  flex-basis: 15em;
}
@supports (grid-gap: 0) {
  .grid-lg {
    display: grid;
    grid-gap: 2em;
  }
  .grid-lg > * {
    padding: 0;
  }
  @media (min-width: 40em) {
    .grid-lg {
      grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr));
    }
  }
}
@supports (grid-gap: 0) {
  @media (min-width: 40em) {
    .grid-lg {
      grid-gap: 2em 3em;
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
@media (min-width: 40em) {
  .grid-lg {
    grid-gap: 5em 0;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 48em) {
  .grid-lg {
    grid-gap: 0 5em;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 56.25em) {
  .grid-banner > .container {
    padding: 2em;
  }
}
@media (min-width: 56.25em) {
  .grid-banner .grid-wrap {
    display: flex;
    flex-wrap: wrap;
    grid-template-rows: minmax(50vh, 1fr);
  }
  .grid-banner .grid-wrap > * {
    flex-grow: 1;
    padding: 1em;
    flex-basis: 15em;
  }
  @supports (grid-gap: 0) {
    .grid-banner .grid-wrap {
      display: grid;
      grid-gap: 2em;
    }
    .grid-banner .grid-wrap > * {
      padding: 0;
    }
    @media (min-width: 56.25em) and (min-width: 40em) {
      .grid-banner .grid-wrap {
        grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr));
      }
    }
  }
  .grid-banner .grid-wrap > * {
    display: flex;
  }
}

@supports (grid-gap: 0) {
  .grid-flush {
    grid-gap: 0 !important;
  }
}

.circle-mask {
  border-radius: 50%;
  height: 100%;
  width: 100%;
  overflow: hidden;
  max-height: 20rem;
  max-width: 20rem;
}
.circle-mask figcaption {
  display: none;
}
.circle-mask.mask-outside {
  shape-outside: circle();
}
@media (min-width: 56.25em) {
  .circle-mask {
    max-height: 25rem;
    max-width: 25rem;
  }
}
@media (min-width: 40em) {
  .circle-mask-md {
    border-radius: 50%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    max-height: 20rem;
    max-width: 20rem;
    max-height: 20rem;
    max-width: 20rem;
  }
  .circle-mask-md figcaption {
    display: none;
  }
  .circle-mask-md.mask-outside {
    shape-outside: circle();
  }
}
@media (min-width: 40em) and (min-width: 56.25em) {
  .circle-mask-md {
    max-height: 25rem;
    max-width: 25rem;
  }
}

@media (min-width: 40em) {
  .circle-mask-sm {
    border-radius: 50%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    max-height: 20rem;
    max-width: 20rem;
    max-height: 10rem;
    max-width: 10rem;
  }
  .circle-mask-sm figcaption {
    display: none;
  }
  .circle-mask-sm.mask-outside {
    shape-outside: circle();
  }
}
@media (min-width: 40em) and (min-width: 56.25em) {
  .circle-mask-sm {
    max-height: 25rem;
    max-width: 25rem;
  }
}

.rounded-mask {
  border-radius: 1rem;
  max-width: 100%;
  overflow: hidden;
}
.rounded-mask img {
  border-radius: 1rem;
}

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */
  box-sizing: border-box;
  overflow-y: scroll;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  margin-bottom: 0.67em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 0 auto 1em;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
  max-width: 100%;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  border: none;
  overflow: visible;
}

button:not(:focus),
input:not(:focus) {
  outline: 0;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 * 3. Remove new default UA CSS property in Chrome.
 */
button,
html [type=button],
[type=reset],
[type=submit] {
  border: none;
  /* 3 */
  border-radius: 0;
  /* 3 */
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

address {
  font-style: normal;
  word-wrap: break-word;
}

dl,
ol,
ul {
  margin-top: 0;
  padding-left: 2em;
}

nav ul {
  list-style-type: none;
  padding-left: 0;
}

ol {
  list-style-type: decimal;
}

p {
  margin-top: 0;
}

.whitney-bold {
  font-family: "Whitney-Bold", "Helvetica Neue", Helvetica, sans-serif;
}

.whitney-semibold {
  font-family: "Whitney-SemiBold", "Helvetica Neue", Helvetica, sans-serif;
}

.whitney-medium {
  font-family: "Whitney-Medium", "Helvetica Neue", Helvetica, sans-serif;
}

.bungee {
  font-family: "Bungee", "Helvetica Neue", Helvetica, sans-serif;
}

.bungee-inline {
  font-family: "Bungee Inline", "Helvetica Neue", Helvetica, sans-serif;
}

.bungee-shade {
  font-family: "Bungee Shade", "Helvetica Neue", Helvetica, sans-serif;
}

.rubik-one {
  font-family: "Rubik One", "Helvetica Neue", Helvetica, sans-serif;
}

.shrikhand {
  font-family: "Shrikhand", "Helvetica Neue", Helvetica, sans-serif;
}

.varela {
  font-family: "Varela", "Helvetica Neue", Helvetica, sans-serif;
}

.lobster {
  font-family: "Lobster", "Helvetica Neue", Helvetica, sans-serif;
}

.merriweather {
  font-family: "Merriweather", "Cambria", Georgia, serif;
}

.news-cycle {
  font-family: "News Cycle", "Helvetica Neue", Helvetica, sans-serif;
}

.patua-one {
  font-family: "Patua One", "Helvetica Neue", Helvetica, sans-serif;
}

.voltaire {
  font-family: "Voltaire", "Helvetica Neue", Helvetica, sans-serif;
}

.acme {
  font-family: "Acme", "Helvetica Neue", Helvetica, sans-serif;
}

.alfa-slab-one {
  font-family: "Alfa Slab One", "Helvetica Neue", Helvetica, sans-serif;
}

.anton {
  font-family: "Anton", "Helvetica Neue", Helvetica, sans-serif;
}

.archivo-black {
  font-family: "Archivo Black", "Helvetica Neue", Helvetica, sans-serif;
}

.arvo {
  font-family: "Arvo", "Cambria", Georgia, serif;
}

.bevan {
  font-family: "Bevan", "Helvetica Neue", Helvetica, sans-serif;
}

.bree-serif {
  font-family: "Bree Serif", "Cambria", Georgia, serif;
}

.hammersmith-one {
  font-family: "Hammersmith One", "Helvetica Neue", Helvetica, sans-serif;
}

.joesefin-sans {
  font-family: "Josefin Sans", "Helvetica Neue", Helvetica, sans-serif;
}

.kaushan-script {
  font-family: "Kaushan Script", "Helvetica Neue", Helvetica, sans-serif;
}

.domine {
  font-family: "Domine", "Helvetica Neue", Helvetica, sans-serif;
}

.oswald {
  font-family: "Oswald", "Helvetica Neue", Helvetica, sans-serif;
}

.crete-round {
  font-family: "Crete Round", "Cambria", Georgia, serif;
}

.alegreya-sans {
  font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
}

.bench-nine {
  font-family: "BenchNine", "Helvetica Neue", Helvetica, sans-serif;
}

.luckiest-guy {
  font-family: "Luckiest Guy", "Helvetica Neue", Helvetica, sans-serif;
}

.bitter {
  font-family: "Bitter", "Helvetica Neue", Helvetica, sans-serif;
}

.montserrat {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, sans-serif;
}

.raleway {
  font-family: "Raleway", "Helvetica Neue", Helvetica, sans-serif;
}

.ranga {
  font-family: "Ranga", "Helvetica Neue", Helvetica, sans-serif;
}

.fjalla-one {
  font-family: "Fjalla One", "Helvetica Neue", Helvetica, sans-serif;
}

.fredoka-one {
  font-family: "Fredoka One", "Helvetica Neue", Helvetica, sans-serif;
}

.quicksand {
  font-family: "Quicksand", "Helvetica Neue", Helvetica, sans-serif;
}

.sanchez {
  font-family: "Sanchez", "Helvetica Neue", Helvetica, sans-serif;
}

.yellow-tail {
  font-family: "Yellowtail", "Helvetica Neue", Helvetica, sans-serif;
}

.reem-kufi {
  font-family: "Reem Kufi", "Helvetica Neue", Helvetica, sans-serif;
}

.righteous {
  font-family: "Righteous", "Helvetica Neue", Helvetica, sans-serif;
}

.chewy {
  font-family: "Chewy", "Helvetica Neue", Helvetica, sans-serif;
}

.rock-salt {
  font-family: "Rock Salt", "Helvetica Neue", Helvetica, sans-serif;
}

.alice {
  font-family: "Alice", "Cambria", Georgia, serif;
}

.icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  width: 1em;
  vertical-align: middle;
  position: relative;
  top: -0.0625em;
  margin-right: 0.25em;
  margin-left: 0.25em;
  text-align: center;
  transform-origin: center;
  transition: transform 0.3 ease;
}

body {
  background-color: #FCFCFC;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

img {
  line-height: 0;
  max-width: 100%;
}

.img-grid {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  justify-content: center;
  flex-grow: 1;
  flex-shrink: 0;
  grid-gap: 0.75em;
  padding: 0.75em;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5em, 1fr));
}
.img-grid > * {
  display: flex;
  line-height: 0;
  transition: 0.4s ease;
}
.img-grid > * a {
  display: flex;
  flex-grow: 1;
  position: relative;
  transition: 0.4s ease;
}
.img-grid > * a:before {
  content: "";
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/instagram.svg);
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: lighten;
  background-size: 90%;
  border-radius: 1.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 90%;
  width: 90%;
  opacity: 0;
  top: 50%;
  left: 50%;
  margin: -45% 0 0 -45%;
  transition: 0.4s ease;
}
.img-grid > * img {
  border-radius: 0;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.4s ease;
  width: 100%;
}
.img-grid > *:hover {
  background-color: transparent;
  border-radius: 1.25em;
  padding: 0.75em;
}
.img-grid > *:hover a:before {
  opacity: 1;
  z-index: 1;
}
.img-grid > *:hover img {
  border-radius: 1.25em;
  z-index: 0;
}
@media (min-width: 85em) {
  .img-grid {
    grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));
    grid-auto-flow: column;
  }
}

@media (min-width: 85em) {
  .grid-item:nth-child(4) {
    grid-column: 4/6;
    grid-row: 1/3;
  }
  .grid-item:nth-child(6) {
    grid-column: 1/3;
    grid-row: 2/4;
  }
  .grid-item:nth-child(11) {
    grid-column: 5/7;
    grid-row: 3/5;
  }
  .grid-item:nth-child(13) {
    grid-column: 2/4;
    grid-row: 4/6;
  }
  .grid-item:nth-child(20) {
    grid-column: 1/3;
    grid-row: 6/8;
  }
  .grid-item:nth-child(21) {
    grid-column: 5/7;
    grid-row: 6/8;
  }
}
</style>
</head>
<body>
  <div class="img-grid">
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=50" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=10" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=70" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=200" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=90" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=450" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=239" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=510" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=315" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=199" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=78" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=116" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=95" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=87" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=329" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=81" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=122" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=206" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=62" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=331" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=159" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=90" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=310" alt="" /></a>
  </div>
  <div class="grid-item">
    <a href="https://www.instagram.com/CodePen/"><img src="http://unsplash.it/600?image=77" alt="" /></a>
  </div>
</div>
</body>
</html>

7. More FlexBox Demo

Made by Anthony Summerlin. Basic flexbox design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <title></title> 
<style>
/* ================================= 
  Flexbox
==================================== */

.container {
	min-height: 50vH;
  display: flex;
	flex-wrap: wrap;
}

.item {
  flex-grow: 2;
}


.item-2 {
  flex-grow: 2;
}
/* ================================= 
  Page Styles
==================================== */

* {
	box-sizing: border-box;
}
body {
	font-size: 1.35em;
	font-family: 'Varela Round', sans-serif;
	color: #fff;
	background: #e8e9e9;
	padding-left: 5%;
	padding-right: 5%;
}
p {
	font-size: 15px;
	line-height: 1.5;
}
.container {
	margin: 45px auto;
	padding: 10px;
	background: #fff;
  border-radius: 5px;
  box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);
}
.item {
	color: #fff;
	padding: 15px;
	margin: 5px;	
	background: #3db5da;
	border-radius: 3px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="item-1 item">Get Some Bruh!
			<p>Hi</p>
		</div>
		<div class="item-2 item">
			Summerlin Designs
			<p>Hi</p>
		</div>
		<div class="item-3 item">
			Damn, Daniel
			<p>Hi</p>
		</div>
		<div class="item-4 item">
			???
			<p>Hi</p>
		</div>
	</div>
</body>
</html>

8. Image Flexbox layout

Made by Matt Wagg. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
img {
  display: block;
  height: auto;
  width: 100%;
}

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 1%;
}

.container__item {
  height: auto;
  margin-top: 1vw;
  width: 98vw;
}

.container__item:first-child {
  margin-top: 0;
}

@media (min-width: 768px) {
  .container__item:first-child {
    width: 100%;
  }
  .container__item:nth-child(n+2) {
    flex: 1;
    margin-right: 1%;
  }
  .container__item:last-child {
    margin-right: 0;
  }
}

@media (min-width: 992px) {
  .container__item:nth-child(-n+2) {
    flex: none;
    margin: 0;
    width: 49.5%;
  }
  .container__item:first-child {
    margin-right: 1%;
  }
  .container__item:nth-child(n+3) {
    flex: 1;
    margin-right: 1%;
  }
  .container__item:last-child {
    margin-right: 0;
  }
}
</style>
</head>
<body>
  <section class="container">
  <article class="container__item">
    <img src="https://c5.staticflickr.com/3/2755/13083004764_4af279843b_c.jpg" alt="Fearless leader" width="800" height="534" />
  </article>
  <article class="container__item">
    <img src="https://c1.staticflickr.com/3/2944/15370465776_de0cc18bb4_c.jpg" alt="Southbank - Strike a Pose" width="800" height="534" />
  </article>
  <article class="container__item">
    <img src="https://c1.staticflickr.com/4/3733/11779565904_6fb946b6c8_c.jpg" alt="Tower Bridge, light trails" width="800" height="534" />
  </article>
  <article class="container__item">
    <img src="https://c2.staticflickr.com/3/2724/13060423953_f60ff86eb5_c.jpg" alt="The Clyde Arc" width="800" height="534" />
  </article>
  <article class="container__item">
    <img src="https://c7.staticflickr.com/4/3953/15564662318_e28c54b9b5_c.jpg" alt="Reflections at St Pauls" width="800" height="534" />
  </article>
</section>
</body>
</html>

9. Basic flexbox layout

Made by King. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
    color: #fff;
    font-family: sans-serif;
}
  .container {
    display: flex;
    flex-direction: row;
    margin: 50px auto;
    font-weight: bold;
    font-size: 18px;
    background-color: #fff;
    max-width: 900px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
  }
  .content-40, .navbar, .content-30 {
    margin: 30px 20px;
    text-align: center;
    line-height: 130px;
    height: 130px;
  }
  .content-30 {
    width: 30%;
    background-color: #F4C831;
  }
  .content-40{
    width: 40%;
    background-color: #93675C;
  }
  .navbar {
    width: 20%;
    background-color: #1EAAF1;
  }
</style>
</head>
<body translate="no" >
  <div class="container">
    <div class="navbar">Hi</div>
    <div class="content-30">Hello</div>
    <div class="content-40">Duh</div>
</div>
</body>
</html>

10. Flexbox layout with different widths

Made by Roberto Betti. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  
<style>
*, *:before, *:after {
  box-sizing: border-box;
}

.highlights {
  -ms-box-orient: horizontal;
  display: -moz-flex;
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
  max-width: 1200px;
  margin: 1em auto;
}

.views-row {
  display: flex;
  padding: 5px;
  color: #fff;
  text-align: center;
}

.views-content {
  flex: 1;
  background: tomato;
  border: 3px solid rgba(0,0,0,.2);
  font-size: 1.3em;
  font-weight: bold;
}

.article-image {
  max-width: 100%;    
}

.views-row-fill {
  flex: 1 100%;
  max-width: 100%;
}

.views-row-flex {
  flex: 1 33.33333333%;
  max-width: 33.33333333%;
}

.views-row-flex-50 {
  flex: 1 50%;
  max-width: 50%;
}

.views-row-flex-25 {
  flex: 1 25%;
  max-width: 25%;
}
</style>
</head>
<body>
  <div class="highlights">
  <div class="views-row views-row-fill">
    <div class="views-content">
      <div class="article-content">
        <h2>News nยฐ 1</h2>
      </div>
    </div>
  </div>
  <div class="views-row views-row-flex">
    <article class="views-content">
      <img src="http://www.aster.it/sites/default/files/styles/highlight_1/public/news/im.png" class="article-image" />
      <div class="article-content">
        <h2>News nยฐ 2</h2>
      </div>
     </article>
  </div>
  <div class="views-row views-row-flex">
    <div class="views-content">
      <div class="article-content">
        <h2>News nยฐ 3</h2>
      </div>
    </div>
  </div>
  <div class="views-row views-row-flex">
    <div class="views-content">
      <div class="article-content">
        <img src="http://www.aster.it/sites/default/files/styles/highlight_1/public/news/im.png" class="article-image" />
        <h2>News nยฐ 4</h2>
      </div>
    </div>
  </div>
  <div class="views-row views-row-flex-50">
   <div class="views-content">
     <div class="article-content">
       <h2>News nยฐ 5</h2>
     </div> 
   </div>
  </div>
  <div class="views-row views-row-flex-50">
    <div class="views-content">
      <div class="article-content">
        <h2>News nยฐ 6</h2>
      </div>
    </div>
  </div>
  <div class="views-row views-row-flex-25">
    <div class="views-content">
      <div class="article-content">
        <h2>News nยฐ 7</h2>
      </div>
    </div>
  </div>
  <div class="views-row views-row-flex-25">
    <div class="views-content">
      <div class="article-content">
        <h2>News nยฐ 8</h2>
      </div>
    </div>
  </div>
  <div class="views-row views-row-flex-25">
    <div class="views-content">
      <div class="article-content">
        <img class="article-image" src="http://www.aster.it/sites/default/files/styles/highlight_1/public/news/shutterstock_189590255_0.jpg?itok=KJ4pkzvh" />
        <h2>News nยฐ 9</h2>
      </div>
    </div>
  </div>
  <div class="views-row views-row-flex-25">
    <div class="views-content">
      <div class="article-content">
        <h2>News nยฐ 10</h2>
      </div>
    </div>
  </div>
</div>
</body>
</html>

11. FlexGum Hisoka Flexbox + GSAP

Made by Amine Bouyarmane. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Zilla+Slab'>
  
<style>
h2 {
  color: #4F2B70;
  font-family: 'Zilla Slab', serif;
  font-weight: 400;
  margin: 0;
}

h3 {
  color: #ABA8F7;
  font-family: 'Zilla Slab', serif;
  font-weight: 400;
  margin: 0;
}

p {
  font-size: 10px;
}

img {
  height: 115%;
}

.diam {
  height: 20px;
  margin: 50px 0px;
}

.diam-border{
  position: absolute;
  height: 40px;
  top:-20px;
  left:-15px;
  z-index:2;
}

.bl {
  bottom:-20px;
  top: initial;
  transform: rotateY(180deg);
}

.desc {
  width: 70%;
}

.container {
  background-color: #333;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.half{
  background-color:#f3f3f3;
  width: 50%;
  height: 100vh;
  height: 100vh;
  display: flex;
  align-items: center;
}

.half:nth-child(1){
  background-color: #DE327C;
  justify-content: flex-end;
}
.half:nth-child(2){
  justify-content: flex-start;
}

.s-half {
  position: relative;
  height: 80vh;
  width: 70vh;
  background-color: #f3f3f3;
  box-shadow: -8px 0px 25px -3px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.sh-col {
  background-color: #DE327C;
  box-shadow: 8px 0px 25px -3px rgba(0,0,0,0.35);
  flex-direction: row;
}
</style>
</head>
<body>
  <div class="container">
  <div class="half h-color">
    <div class="s-half">
      <img class="diam" src="http://aminerman.com/aminermanOld/codepen/img/hiso-diamond.png">
      <div class="desc">
      <h2>Hisoka Morow</h2>
      <h3>Transmuter</h3>
      <p>Paragraph</p>
      </div>
      <img class="diam" src="http://aminerman.com/aminermanOld/codepen/img/hiso-diamond.png">
    </div>
  </div>
  <div class="half">
    <div class="s-half sh-col">
      <img class="diam-border" src="http://aminerman.com/aminermanOld/codepen/img/hiso-diamond2.png">
      <img class="diam-border bl" src="http://aminerman.com/aminermanOld/codepen/img/hiso-diamond2.png">
      <img id="hisoka" src="http://aminerman.com/aminermanOld/codepen/img/hisoka.png">
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js'></script>
      <script id="rendered-js" >
var halfS = document.getElementsByClassName("s-half");
var square = document.getElementsByClassName("diam-border");
var hisoka = document.getElementById("hisoka");

TweenLite.from(halfS[0], 1.5, { y: "542px", opacity: "0", ease:
  Elastic.easeOut.config(1, 0.75) });

TweenLite.from(halfS[1], 1.5, { bottom: "542px", opacity: "0", ease:
  Elastic.easeOut.config(1, 0.75), color: "white" });

TweenLite.from(hisoka, 1.5, { x: "542px", opacity: "0", ease:
  Elastic.easeOut.config(1, 0.75), color: "white" });

var i;
for (i = 0; i < square.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  TweenLite.from(square[i], 0.5, { opacity: "0", delay: 1.3 });
}window.CP.exitedLoop(0);
    </script>
</body>
</html>

12. Satisfying FlexBox Holy Grail Layout

Made by Travis Wagner. FlexBox Holy Grail Layout. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 
<style>
body {
  display: flex;
  height: 100%;
  flex-direction: column;
  line-height: 1.5;
}

header,
footer {
  flex: none;
  text-align: center;
}

header {
  background: skyblue;
}

footer {
  background: salmon;
}

main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

nav,
aside {
  padding: 1em;
  background: wheat;
}

nav {
  order: -1;
}

aside {
}

.center {
  text-align: center;
}

/* Media Queries - Mobile First */
@media (min-width: 768px) {
  main {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  article {
    flex: 1;
    
    margin: 0;
  }
}

@media (min-width: 768px) {
  nav, aside {
    flex: 0 0 10em;
  }
}
/* End of Layout */

h1, h2, h3 {
  text-transform: uppercase;
}

img {
  max-width: 100%;
  margin-bottom: 1em;
}

p {
  padding: 0 2em;
}

p:last-child {
  padding: 0 2em 1em;
}

p:first-child {
  padding: 1em 2em 0;
}
</style>
</head>
<body>
  <body class="grail">
  <header>
    <h1>Flexbox Layout</h1>
  </header>
  <main>
    <article>
      <img src="https://unsplash.it/1650/550">
        <p>Paragraph</p>
        <p>Paragraph</p>
    </article>
    <nav class="center">
      <h3>Navigation</h3>
    </nav>
    <aside class="center">
      <h3>Aside</h3>
    </aside>
  </main>
  <footer>
    <h2>Footer</h2>
  </footer>
</body>
</html>

13. Responsive Flexbox layout

Made by Ruhjaan Cupido. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  font-family: arial, sans-serif;
  color: #ffffff;
  font-size: 24px;
  background: #000001;
}

.main {
  min-height: 800px;
  margin: 0px;
  padding: 0px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  flex-flow: row;
}
.main nav {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 10px;
  background: #87ff8c;
  -webkit-flex: 1 6 20%;
  flex: 1 6 20%;
  -webkit-order: 1;
  order: 1;
}
.main article {
  margin: 4px;
  padding: 5px;
  border: 1px solid #cccc33;
  border-radius: 10px;
  background: #5e71ff;
  -webkit-flex: 3 1 60%;
  flex: 3 1 60%;
  -webkit-order: 2;
  order: 2;
}
.main aside {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 10px;
  background: #87ff8c;
  -webkit-flex: 1 6 20%;
  flex: 1 6 20%;
  -webkit-order: 3;
  order: 3;
}

header, footer {
  display: block;
  margin: 4px;
  padding: 5px;
  min-height: 100px;
  border: 1px solid #eebb55;
  border-radius: 10px;
  background: #fa7e7e;
}

@media all and (max-width: 1280px) {
  nav, aside {
    min-width: 160px;
  }
}
/* Mobile */
@media all and (max-width: 640px) {
  .main {
    -webkit-flex-flow: column;
    flex-direction: column;
  }
  .main nav, .main aside {
    min-height: 100px;
    max-height: 100px;
  }

  header, footer {
    min-height: 100px;
    max-height: 100px;
  }

  nav {
    order: 2 !important;
  }

  article {
    order: 3 !important;
  }

  aside {
    order: 4 !important;
  }
}
@media all and (max-width: 320px) {
  .main {
    -webkit-flex-flow: column;
    flex-direction: column;
  }
  .main nav, .main aside {
    min-height: 50px;
    max-height: 50px;
  }

  header, footer {
    min-height: 50px;
    max-height: 50px;
  }
}
</style>
</head>
<body>
  <html>
    <head></head>
    <body>
        <header>Header</header>
        <div class="main">
            <article>Article content</article>
            <nav>Navigation</nav>
            <aside>Aside</aside>
        </div>
        <footer>Foorter</footer>
</body>
</html>

14. Flexbox Layout Sketch

Made by Alec Lomas. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  
<style>
*, *:after, *:before {
  box-sizing: border-box;
}

.body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.container {
  width: 100%;
  max-width: 960px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  flex-flow: column nowrap;
}

.header, .major-feature, .articles, .reviews, .deals, .featured, .footer {
  text-align: center;
  padding-top: 15px;
}

.header {
  position: relative;
  background: red;
  flex-grow: 0.5;
}

.major-feature {
  background: purple;
  flex-grow: 1;
}

.content {
  flex-grow: 6;
  display: flex;
  flex-flow: row nowrap;
}

.articles {
  flex-grow: 2;
  background: blue;
}

.sidebar {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
}

.reviews {
  background: pink;
  width: 100%;
  flex-grow: 2;
}

.deals {
  background: green;
  width: 100%;
  flex-grow: 1;
}

.featured {
  width: 100%;
  background: yellow;
  flex-grow: 1;
}

.footer {
  flex-grow: 0.5;
  background: orange;
}
</style>
</head>
<body>
  <div class='container'>
  <div class='header'>header</div>
  <div class='major-feature'>major feature</div>
  <div class='content'>
    <div class='articles'>articles</div>
    <div class='sidebar'>
      <div class='reviews'>reviews</div>
      <div class='deals'>deals</div>
      <div class='featured'>featured</div>
    </div>
  </div>
  <div class='footer'>footer</div>
</div> 
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

15. Simple flexbox layout website

Made by jecyu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

body {
    background-color: #eee;
    color: #4e4544;
    font: normal 16px sans-serif;
}

/* Page Layout */

.container{
    max-width: 900px;
    background-color: #fff;
    margin: 0 auto;
    padding: 0 60px;

    display: flex;
    flex-direction: column;
}

/* Header */

header{
    color: #ef5350;
    padding: 20px 0;
    margin-bottom: 60px;

    display: flex;
    justify-content: space-between;
}

header nav {
    list-style: none;
    
    display: flex;
    align-items: baseline;
}

header nav li {
    margin-right: 15px;
}

header button {
    background-color: #ef5350;
    border: none;
    padding: 8px 25px;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}

/* Main Section */

.main-and-sidebar-wrapper {
    display: flex;
}

.main {
    text-align: center;
    margin-right: 60px;
    
    flex: 3;
}

.main h2 {
    font-size: 32px;
    margin-bottom: 55px;
}

.main p {
    margin-bottom: 50px;
}

.main img {
    width: 100%;
}

/* Sidebar */

.sidebar {
    border: 1px solid #a2a2a2;
    padding: 20px;

    flex: 1;
}

/* Footer */

footer {
    color: #ef5350;
    text-align: center;
    padding: 20px 0;
    margin-top: 60px;
}

footer p {
    color: #777;
    font-size: 12px;
    padding: 10px;
}


@media (max-width: 600px) {
    .main-and-sidebar-wrapper {
        flex-direction: column;
    }

    .main {
        margin-right: 0;
        margin-bottom: 60px;
    }
}
</style>
</head>
<body>
<div class="container"> 
    <header>
        <nav>
            <li><a href="#"><h1>Header</h1></a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </nav>
        <button>Button</button>
    </header>
    <div class="main-and-sidebar-wrapper">
        <section class="main">
            <h2>Flexbox Layout</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            <img src="https://unsplash.it/500/550?image=116">        
        </section>

        <aside class="sidebar">
            <h3>Sidebar</h3>
        </aside>
    </div>
    <footer>
        <h3>Footer</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </footer>
</div>
</body>
</html>

16. CSS Grid + Flexbox Layout Demo (no fallback)

Made by Una Kravets. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
  
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Space+Mono");
h1 {
  font-size: 1.4rem;
}

body {
  font-family: "Space Mono";
  text-align: center;
  padding: 0;
  margin: 0;
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 50vw;
  grid-template-areas: "๐Ÿ‘ธ ๐Ÿ‘ธ" "โ†–๏ธ โ†—๏ธ" "โ†™๏ธ โ†˜๏ธ" "๐Ÿ‘Ÿ ๐Ÿ‘Ÿ";
  grid-template-rows: 10vh 45vh 45vh auto;
}

header, footer, section {
  display: flex;
  align-items: center;
  justify-content: center;
}

header {
  grid-area: ๐Ÿ‘ธ;
}
header a {
  color: #a60;
}

footer {
  grid-area: ๐Ÿ‘Ÿ;
}
footer p {
  padding: 2em 0;
}

.top-left {
  grid-area: โ†–๏ธ;
  background-image: url("https://source.unsplash.com/random");
}

.top-right {
  grid-area: โ†—๏ธ;
  background-image: url("https://source.unsplash.com/category/buildings");
}

.bottom-left {
  grid-area: โ†™๏ธ;
  background-image: url("https://source.unsplash.com/category/nature");
}

.bottom-right {
  grid-area: โ†˜๏ธ;
  background-image: url("https://source.unsplash.com/category/technology");
}

section {
  background-position: 50%;
  background-size: cover;
  position: relative;
}
section:after {
  content: "";
  transition-duration: 0.5s;
  transform-origin: 50%;
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 40vw solid transparent;
  border-top: 45vh solid yellow;
  mix-blend-mode: soft-light;
}
section:hover:after {
  transform: rotateX(180deg);
}
section:before {
  content: "";
  background-color: red;
  mix-blend-mode: difference;
  width: 22.5vh;
  height: 22.5vh;
  border-radius: 50%;
}
</style>
</head>
<body>
  <header>
  <h1>This Demo uses both <a href="http://gridbyexample.com/">CSS Grid</a> & <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox</a></h1>
</header>

<section class="top-left"></section>
<section class="top-right"></section>
<section class="bottom-left"></section>
<section class="bottom-right"></section>

<footer>
  <p>Make sure you are on Chrome 57+ or Firefox 52+</p>
</footer>
</body>
</html>

17. Simple flexbox layout

Made by Craig Curtis. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
/* body reset - to get rid of default margins */
body {
	margin: 0;
}

/* basic horizontal alignment */
.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;	
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
    /* based off of 12-column layout (like Bootstrap) */
.flex-item-6 {
    -webkit-flex: 0 1 50%;
    -ms-flex: 0 1 50%;
    flex: 0 1 50%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
/* perfect centering */
.flex-container-vh-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;	
}
.flex-item {
	  -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
/* full height */
.fullheight {
	  /* a nice way to get the viewport height in percentage */
	  min-height: 100vh;
}
.fullwidth {
	  /* another good way to get the viewport width in percentage */
	  width: 100vw;
}
#caja {
		/* I can relax! */
}
#video, #chat {
		/* rems are better than px since px keep getting smaller. rems are units based off of hte root font size, and don't change */
	  border: 0.25rem solid black;
	  color: white;
	  font-size: 4rem;
	  font-family: sans-serif; /* a more readable font family */
}
#video {
	  /* just a fun gradient with ridiculous html colors */
		background: linear-gradient(lime,tomato);  
}
#chat {
	 /* a better way of controlling colors via rgba alpha scale, good for transparent-esque overlays */
	 background: linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.75));
}
</style>
</head>
<body>
  <div id="caja" class="flex-container fullheight fullwidth">
       <div id="video" class="flex-item-6 flex-container-vh-center">
         <div class="flex-item">Video</div>
       </div>
       <div id="chat" class="flex-item-6 flex-container-vh-center">
     	   <div class="flex-item">Chat</div>
       </div>
     </div>
</body>
</html>

18. Responsive Flexbox Footer

Made by Matheus Almeida. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, user-scalable=1">
<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/zub3tbp.css">
  
<style>
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  font-family: acumin-pro, system-ui, sans-serif;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-size: 14px;
  background-color: #f4f4f4;
  align-items: start;
  min-height: 100vh;
}

.footer {
  display: flex;
  flex-flow: row wrap;
  padding: 30px 30px 20px 30px;
  color: #2f2f2f;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
}

.footer > * {
  flex:  1 100%;
}

.footer__addr {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

.footer__logo {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  text-transform: lowercase;
  font-size: 1.5rem;
}

.footer__addr h2 {
  margin-top: 1.3em;
  font-size: 15px;
  font-weight: 400;
}

.nav__title {
  font-weight: 400;
  font-size: 15px;
}

.footer address {
  font-style: normal;
  color: #999;
}

.footer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  max-width: max-content;
  background-color: rgb(33, 33, 33, 0.07);
  border-radius: 100px;
  color: #2f2f2f;
  line-height: 0;
  margin: 0.6em 0;
  font-size: 1rem;
  padding: 0 1.3em;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
}

.footer a {
  text-decoration: none;
}

.footer__nav {
  display: flex;
	flex-flow: row wrap;
}

.footer__nav > * {
  flex: 1 50%;
  margin-right: 1.25em;
}

.nav__ul a {
  color: #999;
}

.nav__ul--extra {
  column-count: 2;
  column-gap: 1.25em;
}

.legal {
  display: flex;
  flex-wrap: wrap;
  color: #999;
}
  
.legal__links {
  display: flex;
  align-items: center;
}

.heart {
  color: #2f2f2f;
}

@media screen and (min-width: 24.375em) {
  .legal .legal__links {
    margin-left: auto;
  }
}

@media screen and (min-width: 40.375em) {
  .footer__nav > * {
    flex: 1;
  }
  
  .nav__item--extra {
    flex-grow: 2;
  }
  
  .footer__addr {
    flex: 1 0px;
  }
  
  .footer__nav {
    flex: 2 0px;
  }
}
</style>
</head>
<body>
  <header>
  <!-- Content -->
</header>

<main>
  <!-- Content -->
</main>

<footer class="footer">
  <div class="footer__addr">
    <h1 class="footer__logo">Something</h1>
        
    <h2>Contact</h2>
    
    <address>
      5534 Somewhere In. The World 22193-10212<br>    
      <a class="#">Email Us</a>
    </address>
  </div>
  
  <ul class="footer__nav">
    <li class="nav__item">
      <h2 class="nav__title">Media</h2>

      <ul class="nav__ul">
        <li>
          <a href="#">Online</a>
        </li>

        <li>
          <a href="#">Print</a>
        </li>
            
        <li>
          <a href="#">Alternative Ads</a>
        </li>
      </ul>
    </li>
    
    <li class="nav__item nav__item--extra">
      <h2 class="nav__title">Technology</h2>
      
      <ul class="nav__ul nav__ul--extra">
        <li>
          <a href="#">Hardware Design</a>
        </li>
        
        <li>
          <a href="#">Software Design</a>
        </li>
        
        <li>
          <a href="#">Digital Signage</a>
        </li>
        
        <li>
          <a href="#">Automation</a>
        </li>
        
        <li>
          <a href="#">Artificial Intelligence</a>
        </li>
        
        <li>
          <a href="#">IoT</a>
        </li>
      </ul>
    </li>
    
    <li class="nav__item">
      <h2 class="nav__title">Legal</h2>
      
      <ul class="nav__ul">
        <li>
          <a href="#">Privacy Policy</a>
        </li>
        
        <li>
          <a href="#">Terms of Use</a>
        </li>
        
        <li>
          <a href="#">Sitemap</a>
        </li>
      </ul>
    </li>
  </ul>
  
  <div class="legal">
    <p>&copy; 2019 Something. All rights reserved.</p>
    
    <div class="legal__links">
      <span>Made with <span class="heart">โ™ฅ</span> remotely from Anywhere</span>
    </div>
  </div>
</footer>
</html>