移动端iPhone下Flexbox justify-content:right对齐不生效如何解决

问题根因 #

• 核心为iOS Safari兼容性问题：justify-content的left/right属性值属于较新的CSS Box Alignment规范，仅iOS 15及以上版本的Safari提供支持，低于该版本的iOS系统会直接忽略该属性，导致第三列对齐失效，和Font Awesome图标没有关联。
• Chrome等桌面浏览器提前完成了新规范适配，所以桌面端和开发者工具模拟移动视图下表现正常，旧版本iOS真机就会出现异常。

纯Flexbox修复方案 #

直接将三个列的justify-content取值替换为所有Flexbox实现都支持的标准值即可：

• 第一列左对齐：用justify-content: flex-start替换justify-content: left
• 第三列右对齐：用justify-content: flex-end替换justify-content: right

同时可以优化选择器精度，避免后代div继承不必要的flex属性，修改后的核心CSS代码如下：

/* 明确父容器.wrap的flex布局属性 */
#nav > .wrap {
  display: flex;
  align-items: center;
  width: 100%;
}
/* 三个列的通用样式 */
#nav > .wrap > div {
  flex: 1;
  display: flex;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 18px;
  padding: 10px 20px 0;
  text-transform: uppercase;
}

#nav > .wrap > div:nth-child(1) {
  background: #00ff00;
  justify-content: flex-start;
}

#nav > .wrap > div:nth-child(2) {
  background: #ff0000;
  justify-content: center;
}

#nav > .wrap > div:nth-child(3) {
  background: #0000ff;
  justify-content: flex-end;
}

其余原有样式无需调整，即可实现全端兼容，不需要额外添加text-align相关的非Flex hack。

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