title: How does flex-wrap work with align-self, align-items and align-content?
body: <h2><code>align-self</code></h2>
  
  <p>In the following code, <code>align-self</code> works with <code>flex-wrap: nowrap</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/AJHct.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AJHct.png" alt="enter image description here"></a></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>flex-container {
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    width: 250px;
    height: 250px;
    background-color: silver;
  }
  flex-item {
    flex: 0 0 50px;
    height: 50px;
    margin: 5px;
    background-color: lightgreen;
  }
  flex-item:last-child {
    align-self: flex-end;
    background-color: crimson;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;flex-container&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
  &lt;/flex-container&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But when the container is switched to <code>flex-wrap: wrap</code>, the <code>align-self</code> property fails.</p>
  
  <p><a href="https://i.stack.imgur.com/OqkWX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OqkWX.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>flex-container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 250px;
    height: 250px;
    background-color: silver;
  }
  flex-item {
    flex: 0 0 50px;
    height: 50px;
    margin: 5px;
    background-color: lightgreen;
  }
  flex-item:last-child {
    align-self: flex-end;
    background-color: crimson;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;flex-container&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
  &lt;/flex-container&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <h2><code>align-items</code></h2>
  
  <p>Similarly, why does <code>align-items</code> work here (wrap disabled):</p>
  
  <p><a href="https://i.stack.imgur.com/IfvzA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IfvzA.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>flex-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    align-content: flex-start;
    width: 250px;
    height: 250px;
    background-color: silver;
  }
  flex-item {
    flex: 0 0 50px;
    height: 50px;
    margin: 5px;
    background-color: lightgreen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;flex-container&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
  &lt;/flex-container&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>...but not here (wrap enabled):</p>
  
  <p><a href="https://i.stack.imgur.com/BUHyl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BUHyl.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-start;
    width: 250px;
    height: 250px;
    background-color: silver;
  }
  
  flex-item {
    flex: 0 0 50px;
    height: 50px;
    margin: 5px;
    background-color: lightgreen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;flex-container&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
  &lt;/flex-container&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <h2><code>align-content</code></h2>
  
  <p>With <code>flex-wrap: nowrap</code>, the <code>align-content</code> property will not vertically center flex items here:</p>
  
  <p><a href="https://i.stack.imgur.com/9eEvr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9eEvr.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>flex-container {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    width: 250px;
    height: 250px;
    background-color: silver;
  }
  
  flex-item {
    flex: 0 0 50px;
    height: 50px;
    margin: 5px;
    background-color: lightgreen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;flex-container&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
  &lt;/flex-container&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But then, strangely, if wrap is enabled and <code>align-content</code> is left out, the container creates wide gaps between rows here:</p>
  
  <p><a href="https://i.stack.imgur.com/jP29u.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jP29u.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>flex-container {
    display: flex;
    flex-wrap: wrap;
    /* align-content: center; */
    width: 250px;
    height: 250px;
    background-color: silver;
  }
  
  flex-item {
    flex: 0 0 50px;
    height: 50px;
    margin: 5px;
    background-color: lightgreen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;flex-container&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
  &lt;/flex-container&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And <code>align-self</code> works again.</p>
  
  <p><a href="https://i.stack.imgur.com/vUDGg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vUDGg.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>flex-container {
    display: flex;
    flex-wrap: wrap;
    /* align-content: center; */
    width: 250px;
    height: 250px;
    background-color: silver;
  }
  flex-item {
    flex: 0 0 50px;
    height: 50px;
    margin: 5px;
    background-color: lightgreen;
  }
  
  flex-item:nth-child(even) {
    align-self: flex-end;
    background-color: crimson;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;flex-container&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
    &lt;flex-item&gt;&lt;/flex-item&gt;
  &lt;/flex-container&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p><em>How does <code>flex-wrap</code> work with <code>align-self</code>, <code>align-items</code> and <code>align-content?</code></em></p>
  </blockquote>