Flexbox项不会在浏览器的窗口大小上重新排序，而是在响应模式下重新排序。
当调整浏览器窗口的大小时，元素不会从水平转换为垂直，而只是水平挤压(测试了Chrome、Edge、Firefox)。但是，如果您切换到响应模式视图(例如火狐CTRL+Shift+M)，那么它们就会按照自己的设想重新排列。
这是在行动中的https://i.imgur.com/RAPiG1W.mp4
在使用Safari在iPhone上浏览时，我也遇到了这个问题，但是Chrome和Firefox响应式的设计模式都显示了它们的工作原理。
我没有跟踪导致这一切的原因。
https://jsfiddle.net/pdsh91fL/
.main-container {
display: flex;
justify-content: space-around;
margin: 15px 0 0 0;
}
.main-container .flex-item {
display: flex;
flex-flow: column;
align-items: center;
border-bottom: 1px solid #aaaaaa;
padding: 0 0 10px 0;
flex: 1;
margin: 0 15px;
}
@media screen and (max-width: 568px) {
.main-container {
flex-wrap: wrap;
}
}回答 3
Stack Overflow用户
发布于 2017-02-13 10:06:47
看看您的媒体查询：
@media screen (max-device-width: 568px) {
flex-wrap: wrap;
}首先，您有两个条件：screen和(max-device-width: 568px)，但是您缺少了and操作符：
@media screen and (max-device-width: 568px) {
flex-wrap: wrap;
}第二件事:您使用的是max-device-width而不是max-width，所以它不会在计算机浏览器窗口上做任何事情，因为它不是设备。因此，查询只在响应模式上工作。
@media screen and (max-width: 568px) {
flex-wrap: wrap;
}最后一件令人不安的事情是:你在哪里应用flex-wrap规则？你应该给它下定义。
@media screen and (max-width: 568px) {
.main-container {
flex-wrap: wrap;
}
}此外，您可能希望改变方向，而不是包装。在下面的示例中，我在本文中更改了查询预可视化的宽度值。
.main-container {
display: flex;
justify-content: space-around;
margin: 15px 0 0 0;
}
.main-container .flex-item {
display: flex;
flex-flow: column;
align-items: center;
border-bottom: 1px solid #aaaaaa;
padding: 0 0 10px 0;
flex: 1;
margin: 0 15px;
}
@media screen and (max-width: 800px) {
.main-container {
flex-flow: column nowrap;
}
}<div class="main-container">
<div class="flex-item flex-item-1">Box 1</div>
<div class="flex-item flex-item-2">Box 2</div>
<div class="flex-item flex-item-2">Box 2</div>
</div>
Stack Overflow用户
发布于 2017-02-12 22:04:06
在HTML页面的<head>标记中有以下内容吗？
<meta name="viewport" content="width=device-width, initial-scale=1.0">Stack Overflow用户
发布于 2017-02-13 11:02:47
FunkyBob对#css freenode的回答
<FunkyBob> you need to set the flex on the items so they won't shrink,
and have a basis size they won't shrink belowhttps://jsfiddle.net/u6gLcw2j/
https://jsfiddle.net/u6gLcw2j/1/
.main-container .flex-item {
flex-basis: 100%;
}https://stackoverflow.com/questions/42192408
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号