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的大小

回答

相关问题