flex項忽略寬度

Question

我在一個網站的響應式設計中使用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> 

Answer 1

當您創建Flex容器（ display: flex或display: inline-flex ）時，它會帶有幾個默認設置。 其中包括：

• flex-direction: row - flex項目將水平對齊
• justify-content: flex-start - flex項將在行的開頭堆疊
• flex-wrap: nowrap - flex項目被強制保留在一行中
• flex-shrink: 1 - 允許flex項縮小

請注意最后兩個設置。

你的三個div被迫留在一條線上。 因此，它們的組合寬度限於容器的寬度。

此外，它們可以收縮，從而防止它們溢出容器。 這也限制了它們的寬度。

要為每個彈性項目應用任何寬度，您可以使用以下方式覆蓋這些初始設置：

1. flex-wrap: wrap - 現在有更多空間，因為flex項可以分解為新行
2. flex-shrink: 0 - 現在有更多空間，因為flex項目不會縮小，並且必要時可以溢出容器