Question

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

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

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

使用flexbox比我更好的人能告诉我这是什么问题吗？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

创建弹性容器（display: flex或display: inline-flex）时，它会带有几个默认设置。其中包括：

flex-direction: row - 弹性项目将水平对齐
justify-content: flex-start - 弹出项目将叠加在行的开头
flex-wrap: nowrap - Flex项目被强制保留在一行
flex-shrink: 1 - 允许灵活项目缩小

请注意最后两个设置。

你的三个div被迫留在一条线上。因此，它们的组合宽度限制在容器的宽度范围内。

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

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

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

flex项忽略宽度

1 个答案: