Flexbox 项目不会在浏览器的窗口大小调整时重新排序，但在响应模式下会重新排序答案

【问题标题】：Flexbox items don't re-order on browser's window resize, but does on Responsive modeFlexbox 项目不会在浏览器的窗口大小调整时重新排序，但在响应模式下会重新排序
【发布时间】：2017-06-30 18:01:29
【问题描述】：

当调整浏览器窗口的大小时，元素不会从水平转换为垂直，而是只会水平挤压（测试过的 Chrome、Edge、Firefox）。但是，如果您切换到响应模式视图（例如 Firefox CTRL+Shift+M），那么它们会按照应有的方式重新排列。

它正在行动https://i.imgur.com/RAPiG1W.mp4

我在 iPhone 上使用 Safari 浏览时也遇到了这个问题，但 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;
   }
}

【问题讨论】：

您应该发布您尝试过的代码。 stackoverflow.com/help/how-to-ask
没有任何代码我们无法修复代码问题
jsfiddle.net/pdsh91fL

标签： html css responsive-design flexbox

【解决方案1】：

HTML 页面的<head> 标记中是否有以下内容？

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

【讨论】：

【解决方案2】：

看看你的媒体查询：

@media screen (max-device-width: 568px) {
    flex-wrap: wrap;
}

首先，您有 2 个条件：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;
    }
}

您可能还想改变 direction 而不是 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>

【讨论】：

@user3108268 那是因为您可能误解了将 flexbox 用于您的目的。您想更改方向，但您只是更改了 wrap 选项。使用flex-flow: column nowrap 而不是flex-wrap: wrap。
解决方案是 flex-basis: 100%;
@user3108268 仅当您希望项目的宽度超过 50% 或更多时，否则它们将继续按行排序，因为您使用的是 flex-direction。

【解决方案3】：

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 below

https://jsfiddle.net/u6gLcw2j/

https://jsfiddle.net/u6gLcw2j/1/

  .main-container .flex-item {
    flex-basis: 100%;
  }

【讨论】：