Difference between width: 50% and flex: 50% in a CSS flexbox?

Question

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:

ul {   display: flex;   flex-flow: row wrap; }  .table a {   flex: 50%;   background: grey; }  .table2 a {   width: 50%;   background: grey; }  <ul class="table">   <a href="#">ad ds fdsaf dsfa dsfj dsf dsfj lkdsjflkdsa jflkdsja lkfjdslkjfldska jlkfdsajlkdjslkajflkd sjalkfjdslkjdsalkjdlakjfldksjflkdsjflkdsjd fdsd</a>   <a href="#">b</a>   <a href="#">c</a>   <a href="#">d</a> </ul>  <ul class="table2">   <a href="#">ad ds fdsaf dsfa dsfj dsf dsfj lkdsjflkdsa jflkdsja lkfjdslkjfldska jlkfdsajlkdjslkajflkd sjalkfjdslkjdsalkjdlakjfldksjflkdsjflkdsjd fdsd</a>   <a href="#">b</a>   <a href="#">c</a>   <a href="#">d</a> </ul> 

http://codepen.io/anon/pen/KAbof

Answer 1

There is no effective difference in this instance.

In fact, it's because flex is shorthand for flex-grow, flex-shrink and flex-basis combined.

flex-basis defines the default size of an element before the remaining space is distributed.

So in this case, you have defined all a children` to 50%.

Reference Article: http://css-tricks.com/snippets/css/a-guide-to-flexbox/