slide1.html

<div class="slide">
  <h1>light markup, light css<br>
      let the content do the work</h1>
  <style>
  #e2 .flex-container {
    display: -webkit-flex;
    display: flex;
  }

  #e2 .flex-item {
    font-size: 1rem;
    margin: 1rem;
  }

  #e2 .big {
    font-size: 2rem;
  }
  </style>
  <div id="e2">
    <div class="flex-container">
      <div class="flex-item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis nisi, sagittis at venenatis eu, auctor ut mi. Quisque nec mauris mauris. In at augue sem. Duis id velit mauris, ut consequat mauris. Sed condimentum elementum mi, sed eleifend augue consequat non.
      </div>
      <div class="flex-item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis nisi, sagittis at venenatis eu, auctor ut mi. Quisque nec mauris mauris. In at augue sem. Duis id velit mauris, ut consequat mauris. Sed condimentum elementum mi, sed eleifend augue consequat non.
      </div>
      <div class="flex-item big">
        Neato!
      </div>
    </div>
    <div class="flex-container">
      <div class="flex-item big">
        Check it out!
      </div>
      <div class="flex-item">
        In at augue sem. Duis id velit mauris, ut consequat mauris. Sed condimentum elementum mi, sed eleifend augue consequat non. Praesent mauris neque, ornare a blandit id, euismod ac purus. Curabitur dapibus semper mauris, et aliquam nisl cursus non.
      </div>
      <div class="flex-item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis nisi, sagittis at venenatis eu, auctor ut mi. Quisque nec mauris mauris. In at augue sem. Duis id velit mauris, ut consequat mauris. Sed condimentum elementum mi, sed eleifend augue consequat non. Praesent mauris neque, ornare a blandit id, euismod ac purus. Curabitur dapibus semper mauris, et aliquam nisl cursus non.
      </div>
    </div>
    <div class="flex-container">
      <div class="flex-item">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis nisi, sagittis at venenatis eu, auctor ut mi. Quisque nec mauris mauris. In at augue sem. Duis id velit mauris, ut consequat mauris. Sed condimentum elementum mi, sed eleifend augue consequat non. Praesent mauris neque, ornare a blandit id, euismod ac purus. Curabitur dapibus semper mauris, et aliquam nisl cursus non.
      </div>
      <div class="flex-item big">
        Wow!
      </div>
    </div>
  </div>
</div>

slide2.html

<div class="slide">
  <h1>it's about the free space</h1>
  <style>
  #e3 .flex-container {
    display: -webkit-flex;
    display: flex;
    min-height: 500px;
    font-family: sans-serif;
    text-align: center;
  }

  #e3 .flex-item {
    font-size: 3em;
    flex: 1;
    -webkit-flex: 1;
    padding: 1rem;
    display: -webkit-flex;
    display: flex;
  }

  #e3 .flex-item span {
    margin: auto;
  }

  #e3 .flex-item.a{
    background-color: black;
    color: #51FF00;
    text-shadow: 2px 2px 0 white;
  }

  #e3 .flex-item.b {
    background-color: #FF0099;
    color: white;
    text-shadow: 3px 3px 0 black;
  }
  </style>
  <div id="e3">
    <div class="flex-container">
      <div class="flex-item a">
        <span>
          ↪
        </span>
      </div>
      <div class="flex-item b">
        <span>
          party time
        </span>
      </div>
      <div class="flex-item a">
        <span>
          ↩
        </span>
      </div>
    </div>
  </div>
</div>

slide3.html

<div class="slide">
  <h1>fixed width + the rest of the page</h1>
  <style>
  #e4 .flex-container {
    display: -webkit-flex;
    display: flex;
    font-size: 1.5rem;
  }

  #e4 img {
    margin: 20px;
    height: 400px;
    float: left;
  }

  #e4 .flex-item {
    background-color: gray;
    color: white;
    overflow: hidden;
  }

  #e4 .flex-item .title {
    -webkit-transform: rotate(90deg) translate(3px, -1em);
       -moz-transform: rotate(90deg) translate(3px, -1em);  
        -ms-transform: rotate(90deg) translate(3px, -1em);  
         -o-transform: rotate(90deg) translate(3px, -1em);  
            transform: rotate(90deg) translate(3px, -1em);
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;  
        -ms-transform-origin: top left;  
         -o-transform-origin: top left;  
            transform-origin: top left;  
    width: 1em;
  }

  #e4 .flex-item .content {
    display: none;
    padding: 0 1em 0 0;
  }

  #e4 .flex-item.focus {
    background-color: black;
    color: white;
  }

  #e4 .flex-item.focus .title {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);  
        -ms-transform: rotate(0deg);  
         -o-transform: rotate(0deg);  
            transform: rotate(0deg); 
    width: auto; 
  }


  #e4 .flex-item.focus .content {
    display: block;
  }
  </style>
  <div id="e4">
    <div class="flex-container">
      <div class="flex-item focus">
        <div class="title">
          Red
        </div>
        <div class="content">
          <img src="images/1.jpg">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis nisi, sagittis at venenatis eu, auctor ut mi. Quisque nec mauris mauris. In at augue sem. Duis id velit mauris, ut consequat mauris. Sed condimentum elementum mi, sed eleifend augue consequat non. Praesent mauris neque, ornare a blandit id, euismod ac purus. Curabitur dapibus semper mauris, et aliquam nisl cursus non.
        </div>
      </div>
      <div class="flex-item">
        <div class="title">
          Crest
        </div>
        <div class="content">
          <img src="images/2.jpg">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis nisi, sagittis at venenatis eu, auctor ut mi. Quisque nec mauris mauris. In at augue sem. Duis id velit mauris, ut consequat mauris. Sed condimentum elementum mi, sed eleifend augue consequat non. Praesent mauris neque, ornare a blandit id, euismod ac purus. Curabitur dapibus semper mauris, et aliquam nisl cursus non.
        </div>
      </div>
      <div class="flex-item">
        <div class="title">
          Chin
        </div>
        <div class="content">
          <img src="images/3.jpg">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis nisi, sagittis at venenatis eu, auctor ut mi. Quisque nec mauris mauris. In at augue sem. Duis id velit mauris, ut consequat mauris. Sed condimentum elementum mi, sed eleifend augue consequat non. Praesent mauris neque, ornare a blandit id, euismod ac purus. Curabitur dapibus semper mauris, et aliquam nisl cursus non.
        </div>
      </div>
      <div class="flex-item">
        <div class="title">
          Funf
        </div>
        <div class="content">
          <img src="images/4.jpg">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis nisi, sagittis at venenatis eu, auctor ut mi. Quisque nec mauris mauris. In at augue sem. Duis id velit mauris, ut consequat mauris. Sed condimentum elementum mi, sed eleifend augue consequat non. Praesent mauris neque, ornare a blandit id, euismod ac purus. Curabitur dapibus semper mauris, et aliquam nisl cursus non.
        </div>
      </div>
      <div class="flex-item">
        <div class="title">
          Outside
        </div>
        <div class="content">
          <img src="images/6.jpg">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis nisi, sagittis at venenatis eu, auctor ut mi. Quisque nec mauris mauris. In at augue sem. Duis id velit mauris, ut consequat mauris. Sed condimentum elementum mi, sed eleifend augue consequat non. Praesent mauris neque, ornare a blandit id, euismod ac purus. Curabitur dapibus semper mauris, et aliquam nisl cursus non.
        </div>
      </div>
    </div>
  </div>
  <script>
    $("#e4 .flex-item").on("mouseover", function(e) {
      $(".focus").removeClass("focus");
      $(this).addClass("focus");
    });
  </script>
</div>

slide4.html

<div class="slide">
  <h1>justify-content / align-content</h1>
  <style>
  #e1 .flex-container {
    min-height: 600px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: space-around;
    align-content: space-around;
  }

  #e1 .flex-item {
    margin: 0 5px;
    max-height: 100px;
  }
  </style>
  <div id="e1">
    <div class="flex-container">
      <img class="flex-item" src="images/1.jpg">
      <img class="flex-item" src="images/2.jpg">
      <img class="flex-item" src="images/3.jpg">
      <img class="flex-item" src="images/4.jpg">
      <img class="flex-item" src="images/5.jpg">
      <img class="flex-item" src="images/6.jpg">
      <img class="flex-item" src="images/7.jpg">
      <img class="flex-item" src="images/8.jpg">
      <img class="flex-item" src="images/9.jpg">
      <img class="flex-item" src="images/10.jpg">
      <img class="flex-item" src="images/11.jpg">
      <img class="flex-item" src="images/12.jpg">
      <img class="flex-item" src="images/13.jpg">
      <img class="flex-item" src="images/14.jpg">
      <img class="flex-item" src="images/15.jpg">
      <img class="flex-item" src="images/16.jpg">
      <img class="flex-item" src="images/17.jpg">
      <img class="flex-item" src="images/18.jpg">
    </div>
  </div>
</div>