在一個(gè)網(wǎng)站的響應(yīng)式設(shè)計(jì)中，我使用flexbox對(duì)html中的一些元素進(jìn)行了重新排序，效果很好，但這些元素的大小無(wú)法正常調(diào)整。

在一個(gè)斷點(diǎn)處，我對(duì)home-promos div應(yīng)用了一個(gè)flex類，并重新排序了元素。這工作正常。

當(dāng)我試圖將div的大小調(diào)整到百分比寬度時(shí)，問題就出現(xiàn)了。它們只會(huì)調(diào)整到某個(gè)點(diǎn)，比如50%，然后就不會(huì)再變大了。

有誰(shuí)比我更擅長(zhǎng)使用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>

當(dāng)您創(chuàng)建一個(gè)flex容器(display: flex或display: inline-flex)時(shí)，它帶有幾個(gè)默認(rèn)設(shè)置。其中包括:

伸縮方向:行伸縮項(xiàng)目將水平對(duì)齊 justify-content:flex-start-flex項(xiàng)目將堆疊在行首 flex-wrap: nowrap - flex項(xiàng)目被強(qiáng)制保持在一行中 伸縮:1 -伸縮項(xiàng)目允許收縮 請(qǐng)注意最后兩個(gè)設(shè)置。

你的三個(gè)div被迫保持在一條線上。因此，它們的組合寬度限于集裝箱的寬度。

此外，允許它們收縮，這防止它們溢出容器。這也限制了它們的寬度。

要將您想要的任何寬度應(yīng)用于每個(gè)flex項(xiàng)目，您可以使用以下選項(xiàng)覆蓋這些初始設(shè)置:

flex-wrap: wrap -現(xiàn)在有更多的空間，因?yàn)閒lex項(xiàng)可以換行 flex-shrink: 0 -現(xiàn)在有了更多的空間，因?yàn)閒lex項(xiàng)目不會(huì)收縮，如果需要的話可以溢出它們的容器