如何使 Flex 项目根据其原始尺寸按比例展开？

按比例扩展 Flex 项目到其原始大小

为了确保 Flex 项目均匀扩展，同时保持其相对宽度，请从 flex: 1 进行调整弯曲：自动。此开关会改变大小计算，考虑内容大小。

理解 Flex-grow 和 Flex-basis

Flex-grow，顾名思义，增加了项目的大小基于其定义的值和可用空间。但是，考虑 flex-basis 的作用很重要，它决定了项目的初始大小。

相对大小与绝对大小

当 flex-basis 为设置为 0 时，flex-grow 将所有空间视为可供分配的可用空间，从而导致绝对大小调整，其中项目的宽度相等，无论content.

相反，如果 flex-basis 为 auto （默认），则在计算可用空间之前会考虑内容大小。这可以实现相对大小调整，仅按比例分配额外的空间。

Flex 值的细分

• flex: 1: flex-grow: 1 (绝对大小）
• flex-grow: 1: 相对大小、因子分解内容大小和可用空间
• flex: auto: 相当于 flex-grow: 1 / flex-shrink: 1 / flex-basis: auto，这也是相对大小

通过使用 flex: auto，按钮将增加尺寸以填充行的剩余宽度，同时保留其原始尺寸比例。这将确保最宽的按钮即使在展开时也比其他按钮更宽。

以上是如何使 Flex 项目根据其原始尺寸按比例展开？的详细内容。更多信息请关注PHP中文网其他相关文章！