为什么 flex-container 上的 width % 会缩小其内容，但 flex-basis 不会？

Question

我一直在玩 flex-box，并试图了解它是如何工作的。 我注意到 flex-container 的 % 宽度将缩小到其内容之外，但是如果我将宽度交换为 flex-basis 它会覆盖百分比并阻止它缩小到其内容之外。 请参阅下面的示例并将 'width' 替换为 'flex-basis'：

 <.DOCTYPE html> <html> <head> <style>:flex-container { display; flex: background-color; DodgerBlue. }:flex-container > div { background-color; #f1f1f1: margin; 2px: padding; 2px: font-size; 30px: width; 20%. } </style> </head> <body> <h1>Create a Flex Container</h1> <div class="flex-container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> <p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p> <p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p> </body> </html>

据我所知， min-width: auto 属性应该启动并防止 flex-item 缩小超过其 min-content 但这仅适用于 flex-basis 而不是宽度，即使 min-width 应该覆盖两个都。 有人可以解释一下这里发生了什么吗？ 我错过了什么吗？

Answer 1

要理解这一点，您需要考虑两个概念：“弹性基本尺寸”和“主要尺寸”。

解释起来有点棘手，但是如果您参考规范中的完整算法，您会注意到我们首先计算“弹性基本尺寸”，然后我们计算“假设的主要尺寸”，即最终尺寸。

对于“假设的主要尺寸”：

假设的主尺寸是根据其使用的最小和最大主尺寸（并将内容框尺寸设置为零）固定的项目的弹性基本尺寸。

当您使用width时，您会影响用于定义最终宽度的“主要尺寸”（“假设的主要尺寸”）。 换句话说，造成非收缩效果的不仅是min-width ，还有“最小最大主要尺寸”。

这是另一个更好理解的例子：

 .flex-container { display: flex; background-color: DodgerBlue; }.flex-container>div { background-color: #f1f1f1; margin: 2px; padding: 2px; font-size: 30px; flex-basis: 20%; width: 40px; }

 <div class="flex-container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>

在上面，项目不能缩小超过width中定义的40px 。

如果您没有定义width 、 min-width和max-width ，浏览器将根据内容自动定义“最小最大电源尺寸”，但如果您给出明确的值，它们将在算法中被考虑。

这可能听起来有点奇怪，但如果你想想这是合乎逻辑的。 flex-basis定义“仅”一个初始大小，该初始大小可能受其他因素影响以定义最终大小。 当使用width或height时，我们正在定义尺寸。

为什么 flex-container 上的 width % 会缩小其内容，但 flex-basis 不会？

问题描述

1 个解决方案

解决方案1
0 2021-12-28 21:38:11

为什么 flex-container 上的 width % 会缩小其内容，但 flex-basis 不会？

问题描述

1 个解决方案

解决方案1 0 2021-12-28 21:38:11

解决方案1
0 2021-12-28 21:38:11