html - CSS flex 列顺序 - Chrome 问题？

Question

我正在尝试“调动”我正在处理的网站，我将其设置为文本框位于带有 display: flex, flex-direction: column 的列中。然后我订购了 div，因为它们在移动设备上的显示方式与在常规浏览器上的显示方式不同。

这是我的结果: http://codepen.io/anon/pen/gpBvyg

据我所知，它在 FF 中的格式看起来是正确的。但在 Chrome 中，它的高度增加了一倍，至少对我来说是这样。这是错误还是我遗漏了什么？

如果我遗漏了任何需要澄清的细节，请告诉我。

谢谢!

Answer 1

在 div 元素之间有 br 元素，它们是 flexbox 的子元素。当您重新排列 div 元素时，您并不是在排列 br 元素，它们占据了页面的顶部并创建了空白区域。

我建议删除所有 br 元素，并尝试让您的非移动页面在没有它们的情况下看起来不错。

这是一个删除了所有 BR 的代码笔。 http://codepen.io/anon/pen/ZGqxzm

顶部没有空间被占用。

如果您发布更多代码，我可以为您提供更多关于如何更轻松地在移动设备和桌面设备上运行此功能的建议。