Html 移动设备上的CSS Flexbox会弄乱盒子

我正在努力转换到Flexbox，并且为此奋斗了很多。在SO的帮助下，我能够开始了，现在正在与另一部分进行斗争。到目前为止，一切都很好，除了我在iPhone4或三星3上查看页面时，一切都一团糟。在桌面上，我可以调整大小，一切都是桃色的，移动的，嗯，它不太好用。我已经尽可能地减少了，以便缩短这里的时间。该标志的作品很好，这是头部和头部的注意，下降下的标志，我很明显。我不想要。我相信这是一个简单的解决办法，但目前对我来说令人畏惧。任何帮助都将不胜感激

*
{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
html、正文、地址、块引号、div、，
表单、字段集、标题、，
h1，h2，h3，h4，h5，h6，
hr、ul、li、ol、ul、dd、dt、，
表，tr，td，th，p，img
{
保证金：0；
填充：0；
}
img，字段集
{
边界：无；
}
身体
{
颜色：#CF6；
保证金：0自动；
字号：1.0em；
最大宽度：1280px；
溢出y：滚动；
文本转换：大写；
字体系列：“Tahoma”，Verdana，无衬线；
背景：#777URL（../homepics/homeback.jpg）居中；
}
#主干道
{
高度：112px；
边缘底部：-112px；
边框：2px实心#444；
背景：#555 url（../homepics/homemenu2.png）0 0 repeat-x；
}
#头套
{
宽度：92%；
显示器：flex；
保证金：0自动；
最大宽度：84em；
柔性流：行换行；
}
#头像
{
排名：0；
左：0；
宽度：77px；
高度：90px；
高度：112px；
背景：url（../homepics/homebogo.png）0 0不重复；
}
#首府区
{
弹性：2；
显示器：flex；
最小宽度：5em；
弯曲方向：立柱；
}
#头信息
{
颜色：#0FF；
高度：45px；
字体：标准125%/45px Arial，Helvetica，无衬线；
}
#头条新闻
{
边际上限：0；
填充：0 10px；
字号：600；
}
#李总新闻
{
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}
#总帐
{
排名：0；
宽度：77px；
高度：112px；
}
@介质（最大宽度：40em）
{
#主干道
{
保证金：0；
填充：0；
边框：1px纯红；
}
#头套
{
宽度：100%；
}
#头像
{
边框：1px纯黄色；
}
#首府区
{
flex：自动；
显示器：flex；
-webkit柔性方向：列；
边框：1px纯红；
}
.head_菜单
{
边框：1px纯蓝色；
}
#头信息
{
边框：1px固体青色；
}
#总帐
{
边框：1px实心橙色；
}
}

---

您只能在更大的视口中使用flex display。这样，列就不会并排显示，而是在选项卡和手机上一列一列地显示。这样做可能有助于：

.row {
  display: flex;
}

@media screen and (max-width: 1024px) {
    .row {
        display: initial !important;
    }
}

---

尝试使用默认属性和供应商属性。我还添加了

flex-wrap:nowrap

，以防止任何flex-item包装到另一个侧面

@介质（最大宽度：40em）
{.....
#首府区
{
flex：自动；
显示器：flex；
显示：-webkit flex；
-webkit柔性方向：列；
弯曲方向：立柱；
-webkit柔性包装：nowrap；
柔性包装：nowrap；
边框：1px纯红；
}

iPhone 4.Samsung 3.您是否检查了浏览器支持？Safari不支持Flexbox