title: How to vertically position 2x divs using flexbox
body: <p>I am trying to vertically position the "Distance" and "Duration" text in the center of their respective divs using flexbox, I can't seem to get it to work. I will also apply this to the "Calories" and "Share" text aswell.</p>
  
  <p>I am also want to use flexbox to evenly space my 4x links vertaically in the middle column.</p>
  
  <p><img src="https://i.stack.imgur.com/epe8k.png" alt="enter image description here"></p>
  
  <p><a href="http://codepen.io/anon/pen/myExNJ" rel="noreferrer">Codepen demo</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Runna - Track your run!&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/reset.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'&gt;
      &lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/js.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="main-wrapper"&gt;
  
          &lt;div id="head-bar"&gt;
              &lt;img class="logo" src="imgs/logo-blue.png"&gt;
          &lt;/div&gt;
          &lt;div id="map-container"&gt;
      &lt;iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" width="100%" height="100%" frameborder="0" style="border:0"&gt;&lt;/iframe&gt;
          &lt;/div&gt;
          &lt;div id="control-container"&gt;
              &lt;div class="left-col"&gt;
                  &lt;div class="distance-wrapper"&gt;
                      &lt;div class="distance-title bold-title"&gt;DISTANCE:&lt;/div&gt;
                      &lt;div class="distance-figure"&gt;1.7KM&lt;/div&gt;
                  &lt;/div&gt;  
  
                  &lt;div class="duration-wrapper"&gt;
                      &lt;div class="duration-title bold-title"&gt;DURATION&lt;/div&gt;
                      &lt;div class="duration-figure"&gt;10.42MINS&lt;/div&gt;
                  &lt;/div&gt;      
              &lt;/div&gt; &lt;!-- End of left col --&gt;
                  &lt;div class="middle-col"&gt;
                      &lt;ul&gt;
                          &lt;li class="arrow"&gt;&lt;a href="#" class="arrowbutton"&gt;&lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  
                          &lt;li&gt;&lt;a href="#"&gt;START&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;STOP&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;PAUSE&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  
                  &lt;/div&gt;
  
  
              &lt;div class="right-col"&gt;
                  &lt;div class="calorie-wrapper"&gt;
                      &lt;div class="calories bold-title"&gt;CALORIES&lt;/div&gt;
                      &lt;div class="calories-result"&gt;100 cal's&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="share-wrapper"&gt;
                      &lt;div class="share bold-title"&gt;SHARE&lt;/div&gt;
                      &lt;div class="share-icons"&gt;FB or Twitter&lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt; &lt;!-- End of right col --&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html {
    box-sizing: border-box;
    height: 100%;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  body {
      height: 100%;
      font-family: 'Lato', sans-serif;
  }
  
  #main-wrapper {
      height: 100vh;
  }
  
  @media all and (max-width: 40em) {
      #head-bar {
          background: black;
          width: 100%;
          height: 5vh;
  
  
      }
  
      .logo {
  
          display: block;
          margin: 0 auto;
          height: 85%;
  
      }
  
      #map-container {
          background: yellow;
          height: 65vh;
          width: 100%;
      }
  }
  
  /***Control columns***/
  #control-container {
      width: 100%;
      height: 30vh;
      color: white;
      font-family: 'Lato', sans-serif;
      text-align: center;
      background: #1b1b1b;
      position: relative;
  
  
  
  }
  .left-col {
      display: flex;
      flex-direction: column;
  
      width: 33.3%;
      height: 100%;
      /*height: 60px;*/
      float: left;
  }
  
  
  .middle-col {
      background: #151515;
      width: 33.3%;
      height: 100%;
      float: left;
      /*box-shadow: 0 0 8px 2px #000;*/
  
  }
  .right-col {
  
      width: 33.3%;
      float: left;
  
  }
  
  .distance-wrapper, .duration-wrapper {
      flex: 1;
      /*background: #ddd;*/
      border-bottom: 1px solid yellow;
       justify-content: center;
  
  
  }
  
  .calorie-wrapper, .share-wrapper {
      display: block;
      width: 100%;
  
  }
  
  .bold-title {
      font-weight: 900;
      font-family: 'Lato', sans-serif;
  }
  
  
  /***Middle Navigation***/
  
  .middle-col {
  
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
  
  }
  
  .middle-col ul {
      margin: 0;
      padding: 0;
      display: table;
      width: 100%;
  
  }
  
  .middle-col li {
      list-style-type: none;
  
  }
  
  .middle-col a {
      color: white;
      text-decoration: none;
      display: block;
      padding: 20px;
  
  
  }
  
  .middle-col a:hover {
      background: green;
      display: block;
  
  }
  
  #control-container:after {
      content: "";
      display: block;
      height: 0;
    clear: both;
  }
  </code></pre>