html - flex 元素忽略宽度

Question

我在网站的响应式设计中使用 flexbox 对我的 html 中的一些元素进行了重新排序，这工作正常，但这些元素无法正确调整大小。

在断点处，我将一类 flex 应用到 home-promos div 并重新排序了元素。这工作正常。

当我尝试将 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>

Answer 1

当您创建一个 flex 容器(display: flex 或 display: inline-flex)时，它带有几个默认设置。其中有:

• flex-direction: row - flex 元素将水平对齐
• justify-content: flex-start - flex 元素将堆叠在行的开头
• flex-wrap: nowrap - flex 元素被强制留在一行
• flex-shrink: 1 - flex 元素允许收缩

注意最后两个设置。

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

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

要将您想要的任何宽度应用于每个 flex 元素，您可以使用以下方法覆盖这些初始设置:

1. flex-wrap: wrap - 现在有更多空间，因为 flex 元素可以换行
2. flex-shrink: 0 - 现在有更多空间，因为 flex 元素不会收缩，必要时可以溢出容器