Question

所以我有X个div，我想将2个div放在彼此相邻的一行中。如果屏幕尺寸宽度小于n px，则每行应为1 div。

目前我有这个

#container {
  display: flex;
}

.box {
  width: 50px;
  background: red;
}

@media(max-width: 300px) {
  #container {
    display: block;
  }
}

<div id="container">
  <div class="box"> 1 </div>
  <div class="box"> 2</div>
  <div class="box"> 3 </div>
  <div class="box"> 4 </div>
</div>

如何将伸缩框限制为每行两个div？

Answer 1

在.box上添加50％的宽度，然后在容器上进行flex-wrap：wrap

此外，您不需要通过更改显示内容来进行操作：从flex到block。只需将.box元素的宽度更改为100％

#container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 50%;
  background: red;
}

@media(max-width: 300px) {
  .box {
     width: 100%;
   }
}

<div id="container">
  <div class="box"> 1 </div>
  <div class="box"> 2</div>
  <div class="box"> 3 </div>
  <div class="box"> 4 </div>
</div>

Answer 2

Flex会帮您一个把戏。 flex-wrap: wrap的{{1}}会使孩子在必要时自动换行。 {p}和#container并在断点.box之后。{

根据MDN：

CSS flex-wrap属性指定将flex项目强制插入单行还是可以包装到多行。如果允许换行，此属性还使您可以控制线的堆叠方向。

如果您是Flexbox的新手，我建议this guide。

摘要

50%

100%

Answer 3

只需在您的容器类中添加一个属性，例如

.container {
 display: flex;
 flex-wrap: wrap;
}

在框类中，只需将框的宽度指定为50％，例如

.box {
 width: 50%;
 background: red;
}

应该可以解决问题。

每行放置两个div

3 个答案:

摘要