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項目忽略寬度

回答

相關問題