flex-basis和width有什么区别？

Question

关于此有很多问题和文章，但据我所知，尚无定论。我能找到的最好的总结是

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

…本身并没有过多说明具有 flex-basis 设置的元素的行为。以我目前对flexbox的了解，我不明白为什么那也不能描述 宽度 。

我想知道 flex-basis 与实际 宽度 有何不同：

• 如果我用 flex-basis 代替 width （反之亦然），那么视觉上会发生什么变化？ __
• 如果将两者都设置为不同的值会怎样？如果它们具有相同的值会怎样？
• 在某些特殊情况下，使用 width 或 flex-basis 与使用其他 宽度 或 flex-basis 会有很大区别吗？
• 如何 宽度 和 柔性基础上 与其他Flexbox的风格，如配合使用时，不同的 柔性包装 ， 柔性成长 和 弹性收缩 ？
• 还有其他重大区别吗？

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-basis``width``flex-basis``auto``content

从规格：

7.2.3。 该flex-basis物业

对于auto和以外的所有值content，flex-basis其解析方式与width水平写入模式相同。

但是，影响auto或content可能根本很少或没有。规格中的更多内容：

auto

在弹性商品上指定时，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 -伸缩项目将水平对齐
• justify-content: flex-start -flex项目将堆叠在主轴线的开始处
• align-items: stretch -伸缩物品将扩展以覆盖容器的横向尺寸
• flex-wrap: nowrap -弹性项目被迫停留在一行
• flex-shrink: 1 -允许伸缩项目收缩

注意最后的设置。

因为默认情况下允许弹性项目收缩（这可以防止它们溢出容器），所以指定的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速记而不是直接使用其速记属性来控制灵活性，因为速记会正确地重置任何未指定的组件以适应常见用途。

浏览器错误

某些浏览器无法在嵌套的flex容器中调整flex项的大小。

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

使用时flex-basis，容器将忽略其子容器的大小，并且子容器会溢出容器。但是在拥有该width属性的情况下，该容器尊重其子级的大小并相应地扩展。