如何在 Flex 布局中使 Flex-Grow 尊重项目的原始大小？

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

在 Flex 布局中，flex-grow 属性可用于按比例分配项目之间的可用空间。但是，默认情况下，flex-grow 会忽略这些项目的原始大小。

问题：均衡项目大小

当将 flex-grow 设置为1、一行中的所有项目都拉伸以填充可用空间，从而导致相等widths:

.container {
  display: flex;
}

.item {
  flex: 1;
}

<div class="container">
  <div class="item">Single</div>
  <div class="item">Larger title</div>
  <div class="item">Another really large title</div>
</div>

解决方案：使用 flex-auto

相对大小调整

.container {
  display: flex;
}

.item {
  flex: auto;
}

根据它们的原始大小，我们可以使用 flex-basis: auto 。这告诉浏览器在计算可用空间时考虑内容大小。

使用 flex: auto，项目现在将根据其原始宽度按比例填充可用空间：

说明

flex-grow 仍然规定了可用空间的分配方式，但是首先考虑 flex-basis 值。如果 flex-basis 为 auto，浏览器将确定每个项目的固有大小并从可用空间中扣除。然后根据 flex-grow 值分配剩余空间。

在我们的示例中，所有项目都具有相同的 flex-grow 值 (1)，因此可用空间平均分配。然而，由于标题较大的项目具有较宽的内在尺寸，因此它会获得较大部分的剩余空间。

以上是如何在 Flex 布局中使 Flex-Grow 尊重项目的原始大小？的详细内容。更多信息请关注PHP中文网其他相关文章！