flex-basis和width有什么区别？
关于此有很多问题和文章，但据我所知，尚无定论。我能找到的最好的总结是
flex-basis 允许您在计算其他任何内容之前指定元素的初始/开始大小。它可以是百分比或绝对值。
…本身并没有过多说明具有 flex-basis 设置的元素的行为。以我目前对flexbox的了解，我不明白为什么那也不能描述 宽度 。
我想知道 flex-basis 与实际 宽度 有何不同：
- 如果我用 flex-basis 代替 width （反之亦然），那么视觉上会发生什么变化？ __
- 如果将两者都设置为不同的值会怎样？如果它们具有相同的值会怎样？
- 在某些特殊情况下，使用 width 或 flex-basis 与使用其他 宽度 或 flex-basis 会有很大区别吗？
- 如何 宽度 和 柔性基础上 与其他Flexbox的风格，如配合使用时，不同的 柔性包装 ， 柔性成长 和 弹性收缩 ？
- 还有其他重大区别吗？
回答：
回答：
阅读问题时首先想到的是，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
从规格：
对于
auto和以外的所有值content，flex-basis其解析方式与width水平写入模式相同。
但是，影响auto或content可能根本很少或没有。规格中的更多内容：
在弹性商品上指定时，auto关键字将检索main size属性的值作为used flex-
basis。如果该值本身是auto，则使用的值为content。
表示根据弹性项目的内容自动调整大小。
_注意：此值在“ Flexible Box Layout”的初始发行版中不存在，因此某些较早的实现不支持该值。
可以通过将
auto主尺寸（width或height）与一起使用来达到同等效果auto。_
因此，根据规范，flex-basis并进行width相同的解析，除非flex-
basis是auto或content。在这种情况下，flex-basis可以使用内容宽度（大概也可以使用该width属性的宽度）。
回答：
记住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 */鼓励作者使用flex速记而不是直接使用其速记属性来控制灵活性，因为速记会正确地重置任何未指定的组件以适应常见用途。
回答：
某些浏览器无法在嵌套的flex容器中调整flex项的大小。
回答：
使用时flex-basis，容器将忽略其子容器的大小，并且子容器会溢出容器。但是在拥有该width属性的情况下，该容器尊重其子级的大小并相应地扩展。
以上是 flex-basis和width有什么区别？ 的全部内容， 来源链接： utcz.com/qa/424730.html
