Question

我的问题是，每当我调整窗口大小时，如果没有与所有其他div相同大小的地方，则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>

这应该是这样的：

Answer 1

将justify-content中的center更改为flex-start中的#wrapper，默认情况下为flex-start，然后将子divs与{left对齐1}}每次用户调整大小时。

＆＃13;

<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>

＆＃13;

Answer 2

使用给定的设置，它们在第二行上的大小不能相同。

原因是当你设置flex: 13px时，它意味着flex: 1 1 13px，因此如果剩下空间，它们会增长，直到它们到达max-width，并且到达小空间时，它们会缩小，直到达到min-width。

也无法检测项目的换行时间，因此要保留添加少量媒体查询所需的min/max-width概念。

注意，需要使用CSS中的!important来覆盖250px的内联值

Fiddle demo

Stack snippet

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>

Answer 3

从flex: 13px;移除div。此外，您对所有div使用相同的id，请删除它。我改用了class。

以下是解决方案

＆＃13;

          #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;
          }

＆＃13;

<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>

＆＃13;

CSS：Flex正在调整下一行的div

3 个答案: