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

Posted 2023-03-05

【中文标题】CSS flexbox中宽度：50％和flex：50％之间的区别？

【英文标题】：Difference between width: 50% and flex: 50% in a CSS flexbox?

【发布时间】：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 问题的答案

【参考方案1】：

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

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

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

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

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