flex-wrap 属性在移动屏幕上不起作用[重复]答案

【问题标题】：flex-wrap property not working on mobile screen [duplicate]flex-wrap 属性在移动屏幕上不起作用[重复]
【发布时间】：2018-12-20 09:22:03
【问题描述】：

如果有人可以提供帮助，我需要帮助。我的 flex-wrap 属性在移动屏幕上不起作用，但是当我缩小浏览器宽度时它可以正常工作。切换设备工具栏不允许 wrap 属性工作。我需要这个用于我即将进行的项目及其重要性。请帮助我（请参阅我上传的附件截图网址）

https://ibb.co/e1nBbo https://ibb.co/mSYjwo

这是我的代码：

body {
  margin: 0;
}

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

.item1 {
  background-color: red;
  flex-grow: 1;
  min-height: 100px;
  flex-basis: 200px;
}

.item2 {
  background-color: yellow;
  flex-grow: 1;
  min-height: 100px;
  flex-basis: 200px;
}

.item3 {
  background-color: green;
  flex-grow: 1;
  min-height: 100px;
  flex-basis: 200px;
}

<div class="flex-container">
  <div class="item1">First Box</div>
  <div class="item2">Second Box</div>
  <div class="item3">Third Box</div>
</div>

【问题讨论】：

为什么不使用媒体查询将它们设为 100% 宽度并强制换行？
我不知道怎么了，你只需要选择Responsive作为设备并使用宽度......
您的问题很有趣，但很遗憾您的图片和图片中的评论没有直接放在您的问题中！
你的问题不够明确。第一次阅读时，我认为您在移动设备上有问题，但实际上，我认为您在特定浏览器上使用的开发工具有问题。如果我的假设是准确的，您能否修改您的问题以准确说明您使用的是哪个浏览器？
您好 schlebe ，感谢您观看并花时间回答我的问题。是的，它实际上是在移动设备上，我们可以通过浏览器开发工具看到不同的移动视图。我把它整理好，因为我收到并回答有效。我在我的 Html 上错过了这个

标签： css flexbox responsive

【解决方案1】：

您需要添加 <meta name="viewport" content="width=device-width, initial-scale=1"> 在您的 Html 上 <head>。

【讨论】：

非常感谢，这成功了！你太棒了:)