Question

我遇到了Safari的问题，在PC上，5.1版本，以及Mac上的Safari（未知细节）。所以我试图弄清楚最兼容的flexbox显示器是什么。

我试试这个：

.d_flex_grid{
    @include flexbox(( display: flex ));
}
.d_flex_grid1{
    @include flexbox(( display: flex ), $version: 1);
}
.d_flex_grid2{
    @include flexbox(( display: flex ), $version: 2);
}
.d_flex_grid3{
    @include flexbox((display: flex), $version: 3);
}

我明白了：

.d_flex_grid {
  display: -webkit-flex;
  display: flex; }

.d_flex_grid1 {
  display: -moz-flex;
  display: -webkit-flex; }

.d_flex_grid2 {
  display: -ms-flex; }

.d_flex_grid3 {
  display: flex; }

我想要的是https://css-tricks.com/using-flexbox/：

  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

或者甚至更多的跨/旧浏览器。指南针设置为这样做，还是应该自己滚动？

Answer 1

这可以给你你想要的东西（指南针＆gt; = 1）：

.d_flex_grid {
  @include flexbox((display: box), $version: 1);
  @include flexbox((display: flexbox), $version: 2);
  @include display-flex;
}

输出：

.d_flex_grid {
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

操作指南针＆amp; flexbox：让它输出所有旧版本和前缀？

1 个答案: