flex-basis和width之间有什么区别？

有关于此的问题和文章,但据我所知,没有任何结论.我能找到的最好的总结是

flex-basis允许您在计算任何其他内容之前指定元素的初始/起始大小.它可以是百分比或绝对值.

...这本身并没有说明基于柔性基组的元素的行为.根据我目前对flexbox的了解,我不明白为什么它也无法描述宽度.

我想知道flex-basis与实际宽度的不同之处:

如果我用flex-basis替换宽度(反之亦然),那么会在视觉上改变什么？

如果我将两者设置为不同的值会发生什么？如果它们具有相同的值会发生什么？

是否存在一些特殊情况,使用宽度或柔性基础与使用另一个有明显区别？

如何宽度和柔性基础上与其他Flexbox的风格,如配合使用时,不同的柔性包装,柔性成长和弹性收缩？

还有其他重大差异吗？

编辑/澄清:这个问题已经以不同的格式询问了什么是flex-basis属性集？但我觉得更直接的比较或总结柔性基础和宽度(或高度)的差异将是不错的.

考虑 flex-direction

阅读问题时首先想到的是flex-basis并不总是适用width.

当flex-direction是row,flex-basis控制宽度.

但是,当flex-direction是column,flex-basis控制高度.

关键差异

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

flex-basis仅适用于弹性项目.Flex容器(也不是flex项目)将忽略flex-basis但可以使用width和height.

flex-basis仅适用于主轴.例如,如果您在flex-direction: column,则width需要使用属性来水平调整弹性项目的大小.

flex-basis对绝对定位的柔性物品没有影响.width和height属性是必要的.绝对定位的弹性项目不参与弹性布局.

通过使用flex属性,三种属性- flex-grow,flex-shrink和flex-basis-可整齐地组合成一个声明.使用width相同的规则需要多行代码.

浏览器行为

就它们的呈现方式而言,和之间应该没有区别,除非是或.flex-basiswidthflex-basisautocontent

从规格:

7.2.3.该flex-basis物业

对于除auto和之外的所有值content,flex-basis以与width水平书写模式相同的方式解析.

但影响auto或content可能是最小的或根本没有.更多来自规范:

auto

在flex项上指定时,auto关键字将检索main size属性的值作为used flex-basis.如果该值本身auto,则使用的值为content.

content

表示基于弹性项目内容的自动大小调整.

注意:此值在Flexible Box Layout的初始版本中不存在,因此一些较旧的实现将不支持它.通过auto与主要尺寸(width或height)一起使用可以实现等效效果auto.

因此,根据规范,flex-basis并以width相同的方式解决,除非flex-basis是auto或content.在这种情况下,flex-basis可以使用内容宽度(据推测,该width属性也可以使用).

该flex-shrink因素

记住flex容器的初始设置很重要.其中一些设置包括:

flex-direction: row - flex项目将水平对齐

justify-content: flex-start - 弹性项目将叠加在主轴上的线的开头

align-items: stretch - flex项目将扩展以覆盖容器的交叉大小

flex-wrap: nowrap - flex项目被迫保持一条线

flex-shrink: 1 - 允许弹性项目缩小

请注意最后的设置.

因为默认情况下允许flex项收缩(这会阻止它们溢出容器),所以可以覆盖指定的flex-basis/ width/ height.

例如, flex-basis: 100px或者width: 100px,加上flex-shrink: 1,不一定是100px.

要渲染指定的宽度 - 并保持固定 - 您需要禁用收缩:

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

要么

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

或者,根据规范的建议:

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

7.2.灵活性的组成部分

鼓励作者使用flex速记来控制灵活性,而不是直接使用其纵向属性,因为速记正确地重置任何未指定的组件以适应常见用途.

浏览器错误

影响所有主流浏览器的错误,IE 11和Edge除外:

flex-basis在嵌套的Flex容器中被忽略.width作品.

在嵌套的Flex容器中调整flex项目时发现了一个问题.

使用时flex-basis,容器会忽略其子项的大小,子容器会溢出容器.但随着width财产的增加,集装箱尊重其子女的规模并相应扩大.这在IE11和Edge中不是问题.

参考文献:

Chrome不会根据孩子的内容展开flex父级

宽度和柔性基础之间的差异

在调整嵌套的flex容器大小时,将忽略Flex-basis.

flex-basis:100px与宽度不同:100px + flex-basis:auto

例子:

https://jsfiddle.net/t419zhra/(来源:@Dremora)

https://jsfiddle.net/voc9grx6/(来源:Chromium Bugs)

https://jsfiddle.net/qjpat9zk/(来源:Chromium Bugs)

flex项目使用flex-basis和white-space: nowrap溢出inline-flex容器. width作品.

似乎一个flex容器设置为在渲染兄弟时inline-flex不能识别flex-basis孩子white-space: nowrap(尽管它可能只是一个宽度未定义的项目).容器不会扩展以容纳物品.

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

参考文献:

内联柔性容器宽度不增长

内联flex容器(display:inline-flex)正在扩展父容器的整个宽度

例:

https://jsfiddle.net/p18h0jxt/1/(从上面的第一篇文章)

影响IE 10和11的错误:

flex-basisflex-grow忽略无单位值的简写声明

flex 不占 flex-basis

flex-basis 不支持 box-sizing: border-box

flex-basis使用calc()速记时忽略重要性

除了Michael_B的优秀摘要之外,值得重复一遍:

flex-basis允许您在计算任何其他内容之前指定元素的初始/起始大小.它可以是百分比或绝对值.

这里的重要部分是初始的.

就其本身而言,这确实解决了宽度/高度,直到其他弹性增长/收缩属性发挥作用.

所以.一个孩子

.child {
 flex-basis:25%;
 flex-grow:1;
}

最初将是25%宽,但随后立即扩大,直到其他元素被考虑在内.如果没有,那将是100%宽/高.

快速演示:

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}

  
Some Content


  
Some Content


  
Some Content