在低版本的手机系统中， button 不能够作为 flex 元素，即使在 CSS 中指定了 display: flex 且 autoprefixer 也已经转换成兼容属性，也还是不起作用。具体表现在其内容并不能使用 flex 布局对齐，比如说居中。
这个场景的背景是，我们展示一个按钮让用户点击。而如果简单把 div 写成按钮的样子，里面直接写文本的话，会导致两个问题： 1. 语义不友好； 2. 低版本手机文本节点不能对齐。
<div> 我是一个按钮 </div> .btn { display: flex; align-items: center; justify-content: center; color: #fff; }为了解决第一个问题，我们直接使用标准的 button 标签即可。不考虑使用 a 标签是因为还要处理默认的点击行为，按钮数量多了之后写起来就比较烦人。而对于第二个问题，我们一般可把按钮的内容（这里只有一个文本节点）包裹在 span 里。
<button> <span>我是一个按钮</span> </button> .btn { display: flex; align-items: center; justify-content: center; & > span { color: #fff; } }但上面这种方案，经过测试发现在低版本系统上还是有问题，文本并没有被居中！这个时候我们可以选择把 span 设为 width: 100% 并设置文本居中属性 text-align: center ，但这种方法相当于放弃了 flex 布局，转而使用了传统的对齐方案。而且既然水平方向的 flex 排版不起作用，我们也不能期望垂直方向的也能正常工作。
经过搜索，我们发现 提供了一种方案，原来的 button 还是保持 block 的显示布局不变，将 flex 布局的属性设置在里面的 span 元素上。经测试，这种方案在我们需要兼容的机型（ and 4.4.4+ / iOS 8.4+ ）上都能正常工作。
.btn { display: inline-block; & > span { width: 100%; height: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; } }该方案一直被 ionic 项目沿用至今，我目前看到的代码位于 。反查资料可知这是 flex box 在早期浏览器实现的 bug ，并早已有人给出了 workaround ，详见 。
2020 年了，希望大家都能往小康冲刺，都能换上更好更新的手机，也希望 Web 前端能够尽早摆脱对较低版本浏览器内核的兼容吧。