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

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

使用 Flexbox 设置元素样式时，最好将容器中的剩余空间分配给项目。但是，默认情况下，flex-grow 为所有项目分配相同的宽度，无论其初始大小如何。要保留这种差异，请考虑将 flex-grow 设置为“auto”而不是“1”。

说明

Flex-grow 基于两个参数进行操作：可用可用空间和 flex-basis。可用空间是指容器中可以在弹性项目之间分配的剩余空间。 Flex-basis 确定分配前每个项目的初始大小。

绝对大小（flex: 1）：

• 当 flex-basis 设置为 0 时，flex-grow 将整个可用空间视为可用空间。
• 这会导致所有大小按比例相等项目，无论其原始内容如何。

相对大小（flex: auto）：

• 当 flex-basis 为 auto（默认）时，flex-grow 会考虑每个项目的内容大小。
• 然后仅按比例分配容器中的剩余空间基于 flex-grow 值。

示例：

考虑三个宽度不同的按钮。我们希望它们填充容器的剩余宽度，每个按钮都保持其比例大小。

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: auto;     // Relative sizing to maintain original proportions
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

通过将 flex-grow 设置为 auto，按钮将从当前大小按比例扩展，填充可用空间，同时保留它们最初的大小差异。

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