flex项忽略宽度

Question

我在一个网站的响应式设计中使用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>

Answer 1

创建Flex容器(display: flex或display: inline-flex)时,它会带有几个默认设置.其中包括:

• flex-direction: row - flex项目将水平对齐
• justify-content: flex-start - flex项目将在行首开始堆叠
• flex-wrap: nowrap - flex项目被迫保持一条线
• flex-shrink: 1 - 允许弹性项目缩小

请注意最后两个设置.

你的三个div被迫留在一条线上.因此,它们的组合宽度限于容器的宽度.

此外,它们可以收缩,从而防止它们溢出容器.这也限制了它们的宽度.

要为每个弹性项目应用任何宽度,您可以使用以下方式覆盖这些初始设置:

1. flex-wrap: wrap - 现在有更多空间,因为弹性项目可能会破坏新线条
2. flex-shrink: 0 - 现在有更多的空间,因为flex项目不会收缩,并且必要时可以溢出容器