CSS flexbox中的宽度：50%和弹性：50%之间的差异？

Question

当其容器具有flex显示时，将元素设置为flex:50%和width: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-增长，flex-收缩和flex-base组合在一起的简写。

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

因此，在本例中，您将所有achildren`定义为50%。

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