如何使 Flexbox 项目根据其初始大小按比例扩展？

根据原始大小制作 Flex-Grow 展开项目

了解问题

在您的情况下，您有使用 Flexbox 将多个按钮排列成一行。您希望这些按钮按比例增加宽度以填充剩余的行空间，同时保持其原始宽度差异。然而，在每个按钮上设置 flex: 1 会导致所有按钮的宽度变得相等。

解决方案：切换到 Flex: Auto

实现你想要的关键结果在于为 flex-grow 选择正确的值。您应该使用 flex: auto 而不是 flex: 1。

Flex-Grow 的工作原理

flex-grow 根据以下条件在弹性项目之间分配容器中的可用空间两个因素：

• 可用空间： 中未使用的空间行/列。
• Flex-basis: 考虑 Flex-grow 之前 Flex 项目的初始大小。

说明

当使用 flex: 1 时，您将 flex-basis 设置为 0，将 flex-grow 设置为 1。这意味着 flexbox 会对待所有行中的空间作为可用空间，从而导致所有项目之间均等分配，无论其内容如何。

另一方面，flex：auto将flex-basis设置为auto，它会考虑之前项目内容的大小分配可用空间。这可确保项目保持其原始大小差异，同时仍填充剩余的行空间。

示例

在代码中，将每个项目的 flex: 1 替换为 flex: auto按钮：

.button {
  flex: auto;  // Change from flex: 1
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

这将允许按钮根据其原始宽度展开，满足您的要求。

以上是如何使 Flexbox 项目根据其初始大小按比例扩展？的详细内容。更多信息请关注PHP中文网其他相关文章！