CSS flexbox中宽度:50%和flex:50%之间的差异？

Question

当其容器具有flex的显示时,将元素设置为flex:50%和宽度:50%之间的区别是什么.结果似乎是一样的:

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

在这种情况下没有有效的区别.

事实上,这是因为flex是简写flex-grow,flex-shrink并flex-basis结合.

flex-basis 在分配剩余空间之前定义元素的默认大小.

因此,在这种情况下,您已将所有a子项定义为50%.

参考文章:http://css-tricks.com/snippets/css/a-guide-to-flexbox/