Html CSS flexbox 中 width: 50% 和 flex: 50% 之间的区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23779144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between width: 50% and flex: 50% in a CSS flexbox?
提问by Evanss
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:
当它的容器有显示为 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>
采纳答案by Paulie_D
There is no effective difference in this instance.
在这种情况下没有有效的区别。
In fact, it's because flexis shorthand for flex-grow, flex-shrinkand flex-basiscombined.
事实上，这是因为flex是flex-grow,flex-shrink和flex-basis组合的简写。
flex-basisdefines the default size of an element before the remaining space is distributed.
flex-basis在分配剩余空间之前定义元素的默认大小。
So in this case, you have defined all achildren` to 50%.
因此，在本例中，您已将所有a子项定义为 50%。
Reference Article: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
参考文章：http: //css-tricks.com/snippets/css/a-guide-to-flexbox/
