Html CSS3-iOS 10.3.2（Chrome和Safari）上的Flex wrap存在问题

在你提到像我这样的其他问题之前，我已经仔细研究了它们，尝试了它们的解决方案，但它们对我不起作用

我的问题在于flexbox布局。我在我的网站上使用flexbox布局的一些元素

我使用的是

flex-wrap:wrap

，这在我的桌面测试环境中效果很好，但是当我尝试在移动设备上测试它时，flex项没有包装，它们都显示在同一行上

.flexContainer{
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
-webkit柔性方向：行；
弯曲方向：行；
/*证明内容：周围的空间*/
}
.flexContainerBox{
-webkit-flex:1；
弹性：1；
边框顶部：20px实心透明；
位置：相对位置；
填充：20px；
最大宽度：100%；
字体系列：“开放式Sans粗体”；
}
.flexContainerBoxBorderRight{
右边框：1px实心#ccc；
位置：绝对位置；
排名前10%；
底部：25%；
右：0；
}
@媒体屏幕和屏幕（最大宽度：566px）{
.flexContainerBoxBorderRight{
显示：无；
}
}
.flexContainerBox1{
边框顶部颜色：#15AF04；
颜色：#15AF04
}
.flexContainerBox2{
边框顶部颜色：#E4A621；
颜色：#E4A621；
}
.flexContainerBox3{
边框顶部颜色：#1b63b1；
颜色：#1b63b1；
}
.flexContainerBox4{
边框顶部颜色：#dd0000；
颜色：#dd0000；
}
.flexContainerBox:：在{
内容：''；
位置：绝对位置；
/*边框：15px实心透明*/
边框宽度：0 15px 0 15px；
边框样式：实心；
边框颜色：透明；
边界底部：0；
位置：绝对位置；
左：50%；
排名：0；
-moz变换：translateX（-50%）；
-ms转换：translateX（-50%）；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
-webkit过渡：所有.3s都很轻松；
-moz转换：所有.3都可以轻松完成；
-ms转换：所有.3s都可以轻松完成；
-o-过渡：所有。3秒放松；
过渡：全部。3放松；
}
.flexContainerBox:悬停：：之前{
边框宽度：15px 15px 0 15px；
}
.flexContainerBox1:悬停：：在{
边框顶部颜色：#15AF04；
}      
.flexContainerBox2:悬停：：在{
边框顶部颜色：#E4A621；
}   
.flexContainerBox3:悬停：：在{
边框顶部颜色：#1b63b1；
} 
.flexContainerBox4:悬停：：在{
边框顶部颜色：#dd0000；
} 
.flexContainerBoxTextBox>ul{
列表样式：无；
填充：0；
保证金：0；
}
.flexContainerBoxTextBox>ul>li{
边缘底部：10px；
}
.FlexContainerBox文本框ul li+li:：之前{
背景色：#ccc；
内容：“；
显示：块；
高度：1px；
保证金：0自动；
位置：相对位置；
顶部：-7px；
左：0；
宽度：22px；
}
.flexContainerBoxTextBox{
文本对齐：居中；
字体大小：1.2米；
字体系列：“博物馆”；
}
.flexContainerBoxHeading{
文本对齐：居中；
字号：1.9em；
填充：10px；
边缘底部：5px；
}

世界级的
设施

日间住宿
中学和小学
2至18岁
200名学生
剑桥IGCSE和GCEs
美丽的体育设施

质量
教育

10年以上质量交付经验
学生的好资源
以学生为中心的学习
优秀的教师队伍
有利环境

个人
触摸

小班制
师生比例低
与教师的最大接触
指导计划
学生辅导

整体
方法

创新教学方法
在学习中使用技术
发展“整体”儿童
培养人才和天赋
课外活动
以基督为中心的学校

将此项添加到标签中：

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

将此项添加到标签中：

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

我看到你解决了这个问题