如何使 Flex 项目按比例扩展至其原始尺寸？

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

在 HTML 和 CSS 中，通常使用 Flexbox 来轻松创建灵活和动态的布局。但是，在某些情况下，您可能希望 Flex 项目按其原始大小按比例扩展，即使容器的整体宽度发生变化也能保持其相对宽度。

在典型的 Flexbox 设置中，您可以使用 Flex： 1 使所有项目均等扩展，无论其初始大小如何。然而，这种方法会导致所有项目具有相同的宽度。为了克服这个问题，您可以利用 flex-basis 属性。

Flex-Basis 和 Flex-grow

flex-basis 定义 Flex 项目的初始宽度。默认情况下，它的值为 auto，这意味着它会根据项目内容的大小进行调整。与 flex-grow 结合使用时，您可以控制容器中多余的空间如何在 Flex 项目之间分配。

使用 flex-basis: auto，flex-grow 只分配 多余的 空间，不包括项目内容占用的空间。这可确保项目按其原始大小按比例扩展。

示例：调整按钮宽度

考虑一排宽度不同的按钮。使用以下 CSS，所有按钮将展开以填充可用空间，并保持其相对大小：

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

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

或者，您可以使用以下简写符号：

.button {
  flex: 1 1 auto;
}

结论

通过了解 flex-basis 和 flex-grow 之间的相互作用，您可以确保 Flex 项目按比例扩展至其原始大小，同时尊重它们各自的宽度。这种方法为动态布局和响应式设计提供了更大的灵活性。

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