title: Flexbox: flex-start, self-start, and start; What's the difference?
body: <p>I just noticed some values of the <code>align-self</code> property that I haven't seen before. What are <code>start</code>, <code>end</code>, <code>self-start</code>, and <code>self-end</code> and what are their differences from <code>flex-start</code> and <code>flex-end</code>?</p>
  
  <p>I've been referring to <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">the guide at CSS-Tricks</a> often when I work with flexbox, but it doesn't mention these values. I read the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self" rel="noreferrer">documentation for align-self</a> at MDN, but the one-line description of the values isn't enough for me to understand.</p>
  
  <p>I thought I might be able to play around with the values to figure it out, but they all seem to do the same thing...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: papayawhip;
    width: 400px;
    height: 200px;
    margin: 1rem auto;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
    border-radius: 0.5em;
  }
  
  .block {
    color: white;
    font-size: 3em;
    font-family: sans-serif;
    padding: 0.5rem;
    margin: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .block-1 {
    background: red;
  }
  
  .block-2 {
    background: orange;
  }
  
  .block-3 {
    background: gold;
  }
  
  .block-4 {
    background: green;
  }
  
  .block-5 {
    background: blue;
  }
  
  .block-2 {
    align-self: flex-start;
  }
  
  .block-3 {
    align-self: start;
  }
  
  .block-4 {
    align-self: self-start;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="block block-1"&gt;1&lt;/div&gt;
    &lt;div class="block block-2"&gt;2&lt;/div&gt;
    &lt;div class="block block-3"&gt;3&lt;/div&gt;
    &lt;div class="block block-4"&gt;4&lt;/div&gt;
    &lt;div class="block block-5"&gt;5&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>