Question

当其容器具有flex的显示时，将元素设置为flex：50％和宽度：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

Answer 1

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

事实上，这是因为flex是flex-grow，flex-shrink和flex-basis合并的简写。

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

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

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

CSS flexbox中宽度：50％和flex：50％之间的差异？

1 个答案: