iPhone 6上FlexBox布局无法正常显示的问题求助

针对你遇到的iPhone 6上FlexBox元素异常的问题，结合Safari 8（iPhone 6默认浏览器）的Flex支持特性，我整理了几个可能的修复方向：

1. 补充旧版WebKit的Flex前缀 #

iPhone 6的Safari 8同时支持旧版的-webkit-box和新版带前缀的-webkit-flex，但你的代码里缺少了-webkit-flex系列的属性，导致部分Flex特性（比如flex-wrap）在旧版浏览器中不生效，进而引发元素重叠。

修改.flex-container的CSS，补充前缀：

.flex-container {
  display: -webkit-box;
  display: -webkit-flex; /* 新增：适配WebKit新版前缀 */
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap; /* 新增：让iPhone6支持换行 */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center; /* 新增 */
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
}

2. 修复子元素的Flex属性兼容 #

旧版-webkit-box的子元素伸缩规则和新版Flex不同，你需要同时适配两种语法，确保子元素在iPhone6上能正确占据50%宽度：

.flex-container>div {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 50%; /* 新增 */
  -ms-flex: 0 1 50%;
  flex: 0 1 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%; /* 新增：给旧版WebKit明确宽度 */
  max-width: 50%;
}

3. 优化嵌套Flex的高度计算 #

iPhone6的Safari对嵌套Flex容器的高度计算存在bug，即使你加了min-height:1px，也需要补充WebKit前缀，同时给嵌套Flex容器明确方向前缀：

.flex-container .item {
  display: -webkit-box;
  display: -webkit-flex; /* 新增 */
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column; /* 新增 */
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center; /* 新增 */
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-size: 0.9em;
  -webkit-min-height: 1px; /* 新增前缀 */
  min-height: 1px;
}

4. 清除浏览器缓存 #

你提到代码测试环境正常但网站异常，很可能是iPhone6的Safari缓存了旧版CSS。可以长按Safari底部的刷新按钮，选择「刷新页面」强制清除缓存，加载最新的样式。

为什么测试环境正常但网站不行？ #

测试环境可能自动补充了部分WebKit前缀，或者你的网站CSS在压缩/部署过程中丢失了关键前缀；另外，网站可能存在其他全局样式（比如父容器的overflow、高度设置）影响了Flex布局，这也是孤立测试环境下不会出现的问题。

内容的提问来源于stack exchange，提问作者Kuzma