css - Flexbox 没有被包裹在移动设备上

Question

我将 flexbox 用于 3 列布局。当我使用浏览器并将其压缩时，这些栏会自动换行，但当我在我的手机上打开网站时，它显示为 3 栏，并且是网站其余部分的两倍宽。

我不知道为什么。我曾尝试搜索这个具体问题，但找不到。

.flex-container3 {
  width: 100%;
  margin-top: 30px;
  text-align: left;
  display: inline-block;
  display: flex;
  margin: 0 30px;
  flex-wrap: wrap;
  display: -webkit-flex;
  /* Safari */
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  display: flex;
  flex-wrap: wrap;
}

.flex-box11,
.flex-box12,
.flex-box13 {
  flex: 1;
  margin: 5px 30px 100px 30px;
}

<div class="flex-container3">
  <div class="flex-box11">
    <h3></h3>
    <p> more content</p>

  </div>

  <div class="flex-box12">
    <h3></h3>
    <p> more content</p>
  </div>

  <div class="flex-box13">
    <h3></h3>
    <p> more content</p>
  </div>

</div>

Answer 1

您使用的是 meta 视口(viewport)吗？

<meta name="viewport" content="width=device-width, initial-scale=1.0">