CSS flexbox中的width：50％和flex：50％之间的差异？ [英] Difference between width: 50% and flex: 50% in a CSS flexbox?

问题描述

当其容器上显示flex时，将元素设置为flex：50％和width：50％之间有什么区别。结果似乎是相同的：

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

推荐答案

没有有效的方法

实际上，这是因为 flex 是 flex-的简写增长，弹性收缩和弹性基础。

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

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

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

因此，在这种情况下，您已将所有<​​code> a 个孩子定义为50％。

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

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

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

这篇关于CSS flexbox中的width：50％和flex：50％之间的差异？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！