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

当其容器具有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>

ul{
显示器：flex；
柔性流：行换行；
}
.表a{
弹性：50%；
背景：灰色；
}
.表2 a{
宽度：50%；
背景：灰色；
}

---

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

事实上，这是因为

flex

是

flex-grow

、

flex-shorn

和

flex-basis

的缩写

flex basis

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

因此，在本例中，您将所有

a

children`定义为50%

---

参考文章：

在

元素中添加

元素而没有

不是一个好的做法。这不仅仅是坏的做法……它是无效的HTML。这不是我的实际代码，我只是想知道我关于felx的问题的答案