flex-basis和width之间有什么不同?

flex-direction

首先我们需要知道的是,flex-basis属性并不是总是为width。

  • 当flex-direction为row时,flex-basis控制的是width。
  • 当flex-direction为column , flex-basis控制的是height。

 


关键点不同

下面是flex-basis和width/height之间的一些重要区别:

  • flex-basis只作用flex item。flex容器将忽略flex-basis,但是width/height仍有用。
  • flex-basis只作用于main axis(主轴)。。例如,如果您在flex-direction: column中,横向调整flex item的宽度需要width属性。
  • flex-basis 对于绝对定位的flex item不起作用。width/height将会是必要的。 参考文档
  • 适用flex可以将flex-grow、flex-shrink和flex-basis这三个属性巧妙地组合到一个声明中,使用width申明的话,将会多出一些代码。

浏览器渲染

就渲染方式而言,flex- basis和width之间应该没有区别,除非flex- basis是auto或content。

规范上:

7.2.3. The flex-basis property

对于除auto和content之外的所有值,在水平写入模式中,flex- base的解析方法与width相同。

但auto或content的影响可能很小,或者根本没有影响。更多来自规范:

auto

当在flex item上指定时,auto关键字检索该值的主要尺寸属性作为使用的flex-basis。如果这个值是它本身是自动的,那么使用的值就是content。

content

指示根据flex项的内容自动调整大小。

注意:这个值在Flexible的初始版本中不存在框布局,因此一些旧的实现将不支持它。将auto与a结合使用,可以达到相同的效果

因此,根据规范,除非flex- basis是自动的或内容的,否则flex- basis和宽度解析是相同的。在这种情况下,flex- basis可能会使用内容宽度(width可能也会使用)。


flex-shrink 问题

记住flex container的初始设置非常重要。这些设置包括:

  • flex-direction: row
  • justify-content: flex-start
  • align-items: stretch
  • flex-wrap: nowrap
  • flex-shrink: 1

因为flex-items默认情况下允许收缩(防止它们溢出容器),所以可能会覆盖指定的flex-basis/width/height。例如,flex- basis: 100px或width: 100px,加上flex-shrink: 1,不一定是100px。

要渲染指定的width-并保持固定-你需要禁用收缩:

div {
   width: 100px;
   flex-shrink: 0;
}  

OR

div {
  flex-basis: 100px;
  flex-shrink: 0;
}

还有一种规范比较推荐的办法:

flex: 0 0 100px;    /*不拉伸,不收缩,保持100px不变*/

Browser BUG

所有主要浏览器都有用,除了ie11和Edge:

flex-basis将会在嵌套的flex-container中被忽略,width有用。

在使用flex- basis时,容器忽略其子容器的大小,子容器会溢出容器。但是对于width属性,容器会考虑其子元素的大小,并相应地进行扩展。这在IE11和Edge中不是问题。

参考:

案例:

flex items 使用flex-basis和white-space:nowrap将会溢出inline-flex容器。 宽度有效。

似乎设置为inline-flex的flex容器在渲染带有white-space的兄弟时不会识iten的flex-basis:nowrap(尽管它可能只是一个宽度未定义的item)。 容器不会扩展以容纳item。

但是当使用width属性而不是flex-basis时,容器会考虑其子项的大小并相应地扩展。 这在IE11和Edge中不是问题。

参考:

案例:


 IE 10 和 11BUG:

(1)
上一篇 2019年2月23日 下午10:06
下一篇 2019年2月25日 下午11:09

相关推荐

发表评论

登录后才能评论