CSS：Flex正在調整下一行div的大小

我的問題是，無論何時調整窗口大小，如果沒有與所有其他div的大小相同的大小，div應該跳到下一行。CSS：Flex正在調整下一行div的大小

在「整頁」中查看此內容並嘗試調整自己的大小。

<html> 
 
<body> 
 
    <div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;"> 
 
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

這是應該的樣子：

來源

2017-11-18 Insanic

[相等寬度撓曲項目甚至船尾呃他們換行]（https://stackoverflow.com/q/44154580/3597276） –

他們不能對第二排同樣大小與給定的設置。

而原因是，當你設置flex: 13px，這意味着flex: 1 1 13px，因此他們會成長，如果有剩餘空間，直到他們到達max-width，以及何時空間不大，他們會收縮，直到到達min-width。

也沒有可能檢測項目換行的時間，因此要保持min/max-width概念，您需要添加幾個媒體查詢。

注意，在CSS中使用的!important需要重寫250px

Fiddle demo

棧的內聯值片斷

body { 
 
    margin: 0; 
 
} 
 
#wrapper div { 
 
    box-sizing: border-box; 
 
} 
 
@media (max-width: 900px) { 
 
    #wrapper div:nth-child(6) {    /* 6th child */ 
 
    max-width: calc(100%/5) !important; 
 
    } 
 
} 
 
@media (max-width: 750px) { 
 
    #wrapper div:nth-child(n+5) {    /* from 5th child */ 
 
    max-width: calc(100%/4) !important; 
 
    } 
 
} 
 
@media (max-width: 600px) {     /* from 4th child */ 
 
    #wrapper div:nth-child(n+4) { 
 
    max-width: 250px !important; 
 
    } 
 
}

<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;"> 
 
    <div id="content1" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content2" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content3" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content4" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content5" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content6" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    </div>

來源

2017-11-18 14:44:49 LGSon

變化justify-content從center到flex-start在#wrapper這是在默認情況下是flex-start，然後將它對準孩子divs到left每用戶調整大小的時間。

<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content:flex-start;"> 
 
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;"> 
 
     Hey! 
 
    </div> 
 
    </div>

來源

2017-11-18 12:01:37 frnt

OP不要求左對齊，他們要求相等的寬度，這也是與張貼的圖像顯示。 – LGSon

是的@LGSon再次閱讀，OP必須糾正我，這不是我想要的。 +1從您的解決方案中學到了新東西。 – frnt

從div刪除flex: 13px;。另外，您對所有div都使用相同的id，請刪除它。我用class代替。

下面是解決

  #wrapper { 
 
      display: flex; 
 
      width: 100%; 
 
      flex-wrap: wrap; 
 
      justify-content: center; 
 
      } 
 
      .content { 
 
      text-align: center; 
 
      background-color: red; 
 
      border: 3px solid grey; 
 
      height: 200px; 
 
      min-width: 150px; 
 
      max-width: 250px; 
 
      }

<html> 
 
     <head> 
 
     </head> 
 
     <body> 
 
     <div id="wrapper"> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
      <div class="content">Hey!</div> 
 
     </div> 
 
     </body> 
 
    </html>

來源

2017-11-18 12:14:25

現在它們不再彎曲，寬度在150px - 250px之間。 – LGSon

CSS：Flex正在調整下一行div的大小

回答

相關問題