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的影响可能很小,或者根本没有影响。更多来自规范:
当在flex item上指定时,auto关键字检索该值的主要尺寸属性作为使用的flex-basis。如果这个值是它本身是自动的,那么使用的值就是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中不是问题。
参考:
- Chrome does not expand flex parent according to children’s content
- Difference between width and flex-basis
- Flex-basis is being ignored when sizing nested flex containers.
- flex-basis:100px does something different from width:100px+flex-basis:auto
案例:
- https://jsfiddle.net/t419zhra/ (source: @Dremora)
- https://jsfiddle.net/voc9grx6/ (source: Chromium Bugs)
- https://jsfiddle.net/qjpat9zk/ (source: Chromium Bugs)
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中不是问题。
参考:
- inline flex container width not growing
- Inline flex container (display: inline-flex) is expanding the full width of parent container
案例:
- https://jsfiddle.net/p18h0jxt/1/ (from first post above)
IE 10 和 11BUG: