Flex布局：flex-basis优先级失效的场景分析
在Flex布局中，flex-basis属性通常优先级高于width。然而，某些情况下，这种优先级会被忽略。本文将深入探讨这一现象。
代码示例及问题
考虑以下CSS代码：
.wrap div:nth-child(1) {
width: 100px;
flex-basis: 0;
}
预期结果：flex-basis: 0 应该使得子元素宽度为0（无内容）或内容宽度（有内容）。
实际结果：在某些浏览器（例如Chrome）中，渲染结果却是100px。
盒模型与Flex布局尺寸计算
理解这个问题的关键在于盒模型和Flex布局中的尺寸计算：
盒模型：元素总宽度 = 内容宽度 + 内边距 + 边框 + 外边距
Flex布局主轴尺寸计算：
- 最大内容尺寸: 未设置最大宽度时，为内容宽度 + 内边距。
-
基础尺寸: 设置了
width，则为width值；否则，为flex-basis值（如果已设置）。 - 伸展空间: 如果元素尺寸未达到最大内容尺寸，剩余空间将分配给Flex子项。
优先级失效的原因
在示例中，子元素的width为100px，而其内容宽度小于100px。根据步骤3，元素未达到最大内容尺寸，浏览器会忽略flex-basis: 0，并根据width: 100px来设置子元素宽度。 flex-basis的优先级在这种情况被width覆盖。
总结
flex-basis优先级失效的关键在于：当Flex子项的内容宽度小于width属性设置的宽度时，width属性将优先决定子元素的宽度，从而导致flex-basis失效。 只有当内容宽度大于或等于width时，flex-basis才能有效控制元素在主轴上的尺寸。 因此，在使用flex-basis时，需要仔细考虑内容宽度与width属性之间的关系。
