文章/答案/技术大牛

发布

社区首页 >问答首页 >Flexbox缩小div，而不是在调整大小时包装

问Flexbox缩小div，而不是在调整大小时包装
EN

Stack Overflow用户

提问于 2020-05-15 10:38:13

回答 1查看 60关注 0票数 2

我设置了一个flexbox，如下所示：

.box-1 {background: #e51400;}
.box-2 {background: #fa6800;}
.box-3 {background: #f0a30a;}
.box-4 {background: #e3c800;}
.box-5 {background: #a4c400;}
.box-6 {background: #60a917;}

.box {
    font-size: 50px;
    color: white;
    padding: 10px;
    width: 300px;
    height: 300px;
        
  }

/*  LAYOUT STYLES */
.container {
  display: flex;
  border: 8px solid black;
  height: 80vh;
  width: 80vw;
  flex-wrap: wrap;
  flex-direction: row;
}

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <main>
        <section class="container">
            <div class="box box-1">1</div>
            <div class="box box-2">6</div>
            <div class="box box-3">3</div>
            <div class="box box-4">4</div> 
            <div class="box box-5">5</div>
            <div class="box box-6">6</div>
          </section>
    </main>
      
</html>

当我缩小页面的宽度时，我希望框可以环绕并创建新的行。这确实会发生，但只有当我使用Firefox的响应式设计模式并禁用“触摸模拟”时才会发生：

然而，当我在启用触摸模拟的情况下运行时(似乎这是默认设置)，或者我使用Chrome的开发人员工具，框仍然是两排的，宽度只会缩小：

(对不起，我没有足够的名气来嵌入图片)

为什么会发生这种情况？

编辑:接受Rene van der Lende的回答如下。

其他资源：

Youtube video explaining meta viewport

html

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-15 20:25:51

在模拟模式下，浏览器会缩小您的网页，就像它在特定的移动设备上一样。在“正常”模式下，将使用整个浏览器视区，但不会缩小到所选设备。想想大的浏览器窗口和小的浏览器窗口。

所以，你看到的行为是正确的！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61810795

复制

相似问题

问Flexbox缩小div，而不是在调整大小时包装
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox缩小div，而不是在调整大小时包装EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox缩小div，而不是在调整大小时包装
EN