flex项目忽略宽度

我在网站的响应式设计中使用flexbox在我的html中重新排序了一些元素，该网站的工作正常，但元素无法正确调整大小。flex项目忽略宽度

在断点处，我已将一类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>

来源

2016-06-14 Neil K

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

flex-direction: row - 柔性项目将调整水平
justify-content: flex-start - 柔性项目会叠加在该行的开始
flex-wrap: nowrap - 柔性的项目被迫留在单行
flex-shrink: 1 - flex项目允许缩小

请注意最后两个设置。

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

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

申请任何你想要的宽度可以覆盖这些初始设置每个FLEX项目：

flex-wrap: wrap - 现在有更多的空间，因为柔性的项目可以打破新线
flex-shrink: 0 - 现在有更多的因为弹性物品不会收缩并在必要时可溢出其容器

来源

2016-06-14 17:31:03

flex项目忽略宽度

回答

相关问题