CSS显示：flex - 必需的前缀

Question

我将Twitter Bootstrap 3.2中显示输入组的方式从display: table更改为display: flex 但我不确定支持旧版浏览器需要哪些CSS前缀。

我目前的代码：

.form-group.input-group{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
}
.form-group.input-group > *:not( .input-group-addon){    
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.input-group-addon{
    -webkit-flex: 1 0 auto;
    -moz-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

我是否需要使用所有这些前缀或其中一些是无用的？

Answer 1

您可以使用Can I Use...。以下是flexbox的浏览器支持的直接链接：http://caniuse.com/#search=flexbox

从中我们可以看出：

• IE10需要-ms-前缀，并且仅支持2012语法（如页面上 Notes 部分所述）。
• Safari，iOS Safari和旧版Android浏览器需要-webkit-前缀。
• 这在IE9或更低版本或Opera Mini上根本不起作用。

我们还可以确定，对于IE11以及更新版本的Firefox，Chrome和Opera，可以删除-ms-，-moz-和-webkit-前缀

Answer 2

您可以使用Autoprefixer。它适用于各种工具。而你必须只编写纯CSS;）

作为示例，您可以使用CLI为css添加前缀。在 bootstrap.css 上，您可以根据规范编写有效的CSS：

.form-group.input-group {
  display: flex;
  align-items: stretch;
}

.form-group.input-group > *:not( .input-group-addon) {
  flex: 1 1 auto;
}

.input-group-addon {
  flex: 1 0 auto;
}

并以

为前缀

sudo npm install --global autoprefixer
autoprefixer bootstrap.css

您也可以在Autoprefixer Playground

上测试代码

侨 拉尔夫