title: align only one link on the right, flex-end not working
body: <p>I have this row of items I'm displaying at the top of the page but I'm not quite sure how to get one of them to appear at the far right. The rest are aligned to the left. I tried <code>align-self: flex-end</code> but that's not working. Here's the code:</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>.wrapper {
      display:flex;
      justify-content:flex-start;
      align-items:flex-start;
  }
  
  a.nav, .search, .query {
      display:inline-block;
  } 
  
  .nav {
      margin-left:25px;
  }
  
  .nav a {
      margin-right:15px;
      color:#515949;
      transition:0.3s ease;
  }
  
  .nav a:hover {
      color:#33382d;
  }
  
  .link-right {
      align-self:flex-end;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;div class="nav"&gt;
  &lt;a href="/" title="link"&gt;&lt;span class="lnr lnr-arrow-left"&gt;&lt;/span&gt;&lt;/a&gt; 
  &lt;a href="/" title="link"&gt;&lt;span class="lnr lnr-envelope"&gt;&lt;/span&gt;&lt;/a&gt; 
  &lt;a href="/" title="link"&gt;&lt;span class="lnr lnr-link"&gt;&lt;/span&gt;&lt;/a&gt;
  
  &lt;form class="search" action="javascript:return false"&gt;
  &lt;input type="text" class="query" placeholder="search..."&gt;&lt;/form&gt;
  &lt;/div&gt;
  &lt;a href="/" class="link-right" title="link"&gt;&lt;span class="lnr lnr-plus-circle"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The link with the class link-right is the one I'm trying to get on the right. I don't know if this makes a difference but as you can see there's also a search bar next to the links, also going on the left. Thanks!</p>