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

Question

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

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

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

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

• 如果我用flex-basis替换宽度(反之亦然),那么会在视觉上改变什么？
• 如果我将两者设置为不同的值会发生什么？如果它们具有相同的值会发生什么？
• 是否存在一些特殊情况,使用宽度或柔性基础与使用另一个有明显区别？
• 如何宽度和柔性基础上与其他Flexbox的风格,如配合使用时,不同的柔性包装,柔性成长和弹性收缩？
• 还有其他重大差异吗？

---

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

Answer 1

考虑 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()速记时忽略重要性

Answer 2

除了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;
}

<div class="flex">
  <div class="child auto">Some Content</div>
</div>
<div class="flex">
  <div class="child value">Some Content</div>
</div>
<div class="flex">
  <div class="child grow">Some Content</div>
</div>

与试验flex-grow,flex-shrink以及flex-basis (或缩写flex :fg fs fb)......可能会导致一些有趣的结果.

Answer 3

如果我们忽略灵活的大小调整方面 ( ) ，似乎没有人提到flex-basis和width(或height，取决于当前的写作模式)之间存在一个关键区别flex-grow: 0; flex-shrink: 0;。

它源于 Flex Layout 中的异常，即 flex 项目的自动最小尺寸默认为min-content而不是通常的零。换句话说，默认min-width: auto计算为min-content而不是0。

结果是flex-basis（默认情况下）由min-content. min-content例如flex-basis: 0，如果您指定一个小于 的值，它将计算为min-content。这实质上意味着（默认情况下）您不能使框的内容溢出，因为框至少具有内容的大小。

这是与 的关键区别width，它可以将框的大小设置为任意小（默认情况下），因为min-width默认为0。如果 的值width小于min-content，则内容将溢出框。

规范中提到了这种行为，但仅在7.1.1flex末尾的错误位置的以下注释中隐式提及。的基本价值观。

默认情况下，弹性项目不会缩小到其最小内容大小（最长单词或固定大小元素的长度）以下。要更改此设置，请设置 min-width 或 min-height 属性。（请参阅 §4.5 Flex 项目的自动最小尺寸。）

如评论中所述，设置最小大小会降低界限，并将其设置为零有效地禁用它，使其flex-basis再次按预期运行。

但也有缺点。首先，主轴没有最小尺寸属性。您必须使用正确的min-width/min-height或min-block-size/min-inline-size属性作为当前flex-direction. 如果您更改了flex-direction，则需要再次找到正确的最小尺寸属性。

其次，flex-basis不能再用于将空间分配给按比例大小的盒子，而不是简单地增加它们的初始大小。有关更多详细信息，请参见规范中的图 7。

这是一个最小的例子。设置min-width: 0使flex-basis表现为再次的预期。

.container {
  display: flex;
}

.container div {
  background-color: lightgrey;
  border: 1px solid black;
  margin: 0 10px;
  /* disable any flexible sizing */
  flex-grow: 0;
  flex-shrink: 0;
  /* TOGGLE ME */
  /* min-width: 0; */
}

.mincontent {
  width: min-content;
}

.smallerflexbasis {
  flex-basis: 3ex;
}

.smallerwidth {
  width: 3ex;
}

<div class="container">
  <div class="mincontent">Lorem ipsum</div>
  <div class="smallerflexbasis">Lorem ipsum</div>
  <div class="smallerwidth">Lorem ipsum</div>
</div>

Answer 4

可能最重要的一点是要添加：

如果浏览器不支持flex怎么办？在这种情况下，width/height接管并应用其值。

定义width/height元素是一个很好的想法-几乎是必不可少的- 即使您对拥有完全不同的价值flex-basis。记住通过禁用display:flex并查看得到的内容进行测试。

Answer 5

如果你设置一个 div min-width:600px，如果窗口大小低于 600px，你会看到一个水平滚动条，这不是一个好的用户体验设计。

如果你设置它flex-basis:600px，如果窗口大小低于 600px，该框将缩小，并且你将看不到水平条。

请注意，这flex-basis仅适用于弹性项目。