我在网站的响应式设计中使用 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>
最佳答案
当您创建一个 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 元素,您可以使用以下方法覆盖这些初始设置:
flex-wrap: wrap
- 现在有更多空间,因为 flex 元素可以换行flex-shrink: 0
- 现在有更多空间,因为 flex 元素不会收缩,必要时可以溢出容器
关于html - flex 元素忽略宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37815450/