title: What's the difference between flex-start and baseline?
body: <p>When working with flex align-* properties, what's the difference between <code>flex-start</code> and <code>baseline</code>?</p>
  
  <p>The below code snippet gives same output for <code>align-self: flex-start</code> and <code>align-self: baseline</code>.</p>
  
  <p>In which cases will <code>align-self: flex-start</code> and <code>align-self: baseline</code> behave differently?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-container {
    color: white;
    display: -webkit-flex;
    display: flex;
    width: 350px;
    height: 200px;
    background-color: yellow;
  }
  .flex-item {
    background-color: green;
    width: 50px;
    min-height: 100px;
    margin: 10px;
  }
  .item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
  }
  .item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
  }
  .item3 {
    -webkit-align-self: center;
    align-self: center;
  }
  .item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
  }
  .item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
    &lt;div class="flex-item item1"&gt;flex-start&lt;/div&gt;
    &lt;div class="flex-item item4"&gt;baseline&lt;/div&gt;
    &lt;div class="flex-item item2"&gt;flex-end&lt;/div&gt;
    &lt;div class="flex-item item3"&gt;center&lt;/div&gt;
    &lt;div class="flex-item item5"&gt;stretch&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>