在CSSflexbox中 宽度:50%和flex:50%之间的区别

当它的容器具有 flex 的显示时,将元素设置为 flex:50 % 和 width:50 % 之间有什么区别。

当它的容器具有 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
33

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

事实上,这是因为flexflex-growflex-shrinkflex-basis的简写。

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

因此,在这种情况下,您已将所有achildren '定义为 50 %。

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

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(535)
安装phpapache模块启用sudoapt安装 libapache2-mod-php7.3
上一篇
如何将VB项目转换为C# 项目
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(52条)