title: Difference between width: 50% and flex: 50% in a CSS flexbox?
body: <p>When its container has a display for flex, what is the difference between setting an element to be flex: 50% and width: 50%. The outcome appears to be the same: </p>
  
  <pre><code>ul {
    display: flex;
    flex-flow: row wrap;
  }
  
  .table a {
    flex: 50%;
    background: grey;
  }
  
  .table2 a {
    width: 50%;
    background: grey;
  }
  
  &lt;ul class="table"&gt;
    &lt;a href="#"&gt;ad ds fdsaf dsfa dsfj dsf dsfj lkdsjflkdsa jflkdsja lkfjdslkjfldska jlkfdsajlkdjslkajflkd sjalkfjdslkjdsalkjdlakjfldksjflkdsjflkdsjd fdsd&lt;/a&gt;
    &lt;a href="#"&gt;b&lt;/a&gt;
    &lt;a href="#"&gt;c&lt;/a&gt;
    &lt;a href="#"&gt;d&lt;/a&gt;
  &lt;/ul&gt;
  
  &lt;ul class="table2"&gt;
    &lt;a href="#"&gt;ad ds fdsaf dsfa dsfj dsf dsfj lkdsjflkdsa jflkdsja lkfjdslkjfldska jlkfdsajlkdjslkajflkd sjalkfjdslkjdsalkjdlakjfldksjflkdsjflkdsjd fdsd&lt;/a&gt;
    &lt;a href="#"&gt;b&lt;/a&gt;
    &lt;a href="#"&gt;c&lt;/a&gt;
    &lt;a href="#"&gt;d&lt;/a&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/KAbof" rel="noreferrer">http://codepen.io/anon/pen/KAbof</a></p>