title: How to center and corner flex items in flexbox?
body: <p>I am trying to learn Flexbox but having trouble getting what I want. </p>
  
  <p>What I want:</p>
  
  <ol>
  <li><p>1 box which will have 2 labels (a number over top a label)</p></li>
  <li><p>second box will have 4 labels (1 in top left, 1 in top right, 1 in center and 1 in bottom middle)</p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-container {
      display: flex;
      background-color: lightgrey;
      flex-direction: row;
      align-items: stretch;
      align-content: stretch;
  }
  
  .flex-item {
      display: flex;
      background-color: cornflowerblue;
      margin: 10pt;
  }
  
  
  .flex-item-2 {
      display: flex;
      background-color: cornflowerblue;
      margin: 10pt;
      flex: 2 0 0;
  }
  
  .flex-qty-container {
      font-size: 27pt;
      margin: 0;
  }
  
  .flex-sub-container {
      display: flex;
      background-color: yellow;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: flex-start;
       flex: 2 0 0;
  }
  
  .flex-item-left-corner {
      background-color: red;
  }
  
  .flex-item-right-corner {
      background-color: red;
      align-self: flex-end;
      font-size: 10pt;
  }
  
  .flex-item-center {
      background-color: red;
       font-size: 12pt;
  }
  
  .flex-item-bottom-middle {
      background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;div class="flex-container"&gt;
              &lt;div class="flex-item"&gt;
                  &lt;div class=""&gt;
                      &lt;p class="flex-qty-container"&gt;7&lt;/p&gt;
                      &lt;p class="flex-qty-label"&gt;Label&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="flex-item-2"&gt;
                  &lt;div class="flex-sub-container"&gt;
                      &lt;p class="flex-item-left-corner"&gt;top left corner&lt;/p&gt;
                      &lt;p class="flex-item-right-corner"&gt;top right corner&lt;/p&gt;
                      &lt;p class="flex-item-center"&gt;Center of box&lt;/p&gt;
                      &lt;p class="flex-item-bottom-middle"&gt;Bottom middle&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>