Question

在宽屏幕上，我想呈现两个均匀间隔的div：

|          [ONE]             [TWO]            |

当屏幕的宽度小于div的组合宽度时，我希望它们包裹起来，每个都像这样居中：

|  [ONE]  |
|  [TWO]  |

我目前正在尝试使用这样的flexbox：

.evenly-space {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

<div class="evenly-space">
  <div style="width:200px;border:1px solid black">ONE</div>
  <div style="width:200px;border:1px solid black">TWO</div>
</div>

但这两个元素保持在一条线上并且不包裹。

有没有办法用flexbox或其他方式实现这一目标？

Answer 1

您必须将flex-wrap属性添加并设置为wrap

.evenly-space {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

Answer 2

只需flex-wrap: wrap

.evenly-space {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

<div class="evenly-space">
  <div style="width:200px;border:1px solid black">ONE</div>
  <div style="width:200px;border:1px solid black">TWO</div>
</div>

Answer 3

您只需添加

即可

 flex-wrap: wrap;

.evenly-space班级

中的

属性

Flexbox均匀地间隔元素并包裹在较窄的屏幕上

3 个答案: