docs/css_notes/flex-box/align-content/index.html

<!DOCTYPE html>
<html>

<head>
  <title>Align Content</title>
  <link href="style.css" type="text/css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
</head>

<body>

  <h1 class="desc">align-content: flex-box cross-axis (gridlayout block-axis) align multi-row contents;</h1>

  <h1>Flex Start</h1>
  <div class="container" id="flexstart">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

  <h1>Flex End</h1>
  <div class="container" id="flexend">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

  <h1>Center</h1>
  <div class="container" id="center">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

  
  <h1>Baseline</h1>
  <div class="container" id="baseline">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

  

  <h1>Space Between</h1>
  <div class="container" id="between">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

  <h1>Space Around</h1>
  <div class="container" id="around">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

  <h1>Stretch</h1>
  <div class="container" id="stretch">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

</body>

</html>