flex-layout-1.html

<html>
  <head>
    <title>Flex Layout - 1</title>
    <link rel="stylesheet" href="flex-layout-1.css"/>
  </head>
  <body>
      <div class="wrapper">
          <header class="header">My header</header>
  
        <article class="content">
            <h1>Using negative space</h1>
            <p>This example uses line-based positioning, to position the header and footer, stretching them across the grid.
          </p>
          <p>By making the content span a number of rows, we can then space the blocks out next to that content. Each in their own row.
          </p>
      </article>
      <div class="block-a">Block A</div>
      <div class="block-b">Block B</div>
      <div class="block-c">Block C</div>
      <footer class="footer">
        My footer
      </footer>
  </div>
</body>
</html>