今天小编跟大家讲解下有关button 使用flex布局的兼容性问题 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关button 使用flex布局的兼容性问题 的相关资料，希望小伙伴们看了有所帮助。
在低版本的手机系统中 我们发现button不能够作为 flex 容器 即使在 css 中指定了display: flex且 autoprefixer 也已经转换成兼容属性 也还是不起作用。具体表现在其内容并不能使用 flex 布局对齐 比如说居中。
这里的背景是 我们经常需要展示一些按钮 用户可点击执行特定的操作。如果只是简单把div写成按钮的样子 里面直接写文本的话 会产生至少两个问题： 1. 语义和无障碍都不够友好； 2. 低版本手机文本节点不能对齐。
<div class="btn"> 我是一个按钮</div>.btn { display: flex; align-items: center; justify-content: center; color: #fff;}为了解决第一个问题 我们直接使用标准的button标签即可。不考虑使用a标签原因是既要处理默认的点击行为 也要为了 a11y 指定 WAI-ARIA 的role="button" 按钮数量多了之后写起来就比较烦人。而对于第二个问题 我们一般可把按钮的内容（这里只有一个文本节点）包裹在span里。
<button class="btn"> <span>我是一个按钮</span></button>.btn { display: flex; align-items: center; justify-content: center; & > span { color: #fff; }}但上面这种方案 经过测试发现在低版本系统上还是有问题 文本并没有被居中！这个时候我们可以选择把span设为width: 100%并设置文本居中属性text-align: center 但这种方法相当于放弃了 flex 布局 转而使用了传统的对齐方案。而且既然水平方向的 flex 排版不起作用 我们也不能期望垂直方向的也能正常工作。
经过搜索 我们发现ionic-team/ionic#5310提供了一种方案 原来的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 项目沿用至今 我目前看到的代码位于button.scss#L43#L241。反查资料可知这是 flex box 在早期浏览器实现的 bug 并早已有人给出了 workaround 详见Flexbug #9 -Some HTML elements can't be flex containers。
原文：https://www.cnblogs.com/BlackStorm/archive/2020/01/07/12163153.html
来源：爱蒂网