Question

我使用flexbox进行3列布局。当我使用我的浏览器并将其缩小时，列将换行，但是当我在移动设备上打开该站点时，它显示为3列，并且是网站其余部分的两倍宽。

我不知道为什么。我试过搜索这个具体问题但却找不到它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您使用的是meta视口吗？

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

Flexbox没有包含在移动设备上

1 个答案: