CSS flexbox中宽度：50％和flex：50％之间的区别？答案

【问题标题】：Difference between width: 50% and flex: 50% in a CSS flexbox?CSS flexbox中宽度：50％和flex：50％之间的区别？
【发布时间】：2014-07-09 20:34:02
【问题描述】：

当它的容器有一个 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

【问题讨论】：

在<ul> 元素中添加<a> 元素而不包含<li> 不是一个好习惯。
这不仅仅是不好的做法......它是无效的 HTML。
这不是我的实际代码，我只是想知道我关于 felx 问题的答案

标签： html css flexbox width

【解决方案1】：

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

实际上，这是因为flex 是flex-grow、flex-shrink 和flex-basis 组合的简写。

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

所以在这种情况下，您已将所有 a children` 定义为 50%。

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

【讨论】：