弹性项目忽略宽度

我在网站的响应式设计中使用 Flexbox 重新排序了 html 中的一些元素，效果很好，但元素的大小无法正确调整。

在断点处，我将一类 Flex 应用于home-promosdiv 并重新排序了元素。这工作正常。

当我尝试将 div 的大小调整为百分比宽度时，问题就出现了。它们只会调整到某个点，例如 50%，然后就不会再变大。

有谁比我更擅长使用 Flexbox 来告诉我问题是什么吗？

.home-promos {
  display: flex;
}
.home-promo-center {
  order: 1;
}
.home-promo-left {
  order: 2;
}
.home-promo-right {
  order: 3;
}

<div class="home-promos">
  <div class="home-promo-left">
    <div class="promo-left-content">
      *content*
    </div>
  </div>
  <div class="home-promo-center">
    <div class="promo-center-content">
      *content*
    </div>
  </div>
  <div class="home-promo-right">
    <div class="promo-right-content">
      *content*
    </div>
  </div>
</div>

当您创建 Flex 容器时（display: flex or display: inline-flex），它带有几个默认设置。其中包括：

• flex-direction: row- 弹性项目将水平对齐
• justify-content: flex-start- 弹性项目将堆叠在行的开头
• flex-wrap: nowrap- 弹性项目被迫保持在一行中
• flex-shrink: 1- 弹性项目允许收缩

请注意最后两个设置。

您的三个 div 被迫保持在一行中。因此，它们的组合宽度仅限于容器的宽度。

此外，它们可以收缩，这可以防止它们溢出容器。这也限制了它们的宽度。

要将您想要的任何宽度应用于每个弹性项目，您可以使用以下方法覆盖这些初始设置：

1. flex-wrap: wrap- 现在有更多的空间，因为弹性项目可以换行
2. flex-shrink: 0- 现在有更多的空间，因为弹性项目不会收缩并且可以在必要时溢出其容器