Question

.flexcontainer {
    display: box;
    display: flex;
}

这个似乎可以工作......但这是个好主意吗？我正在尝试让flexbox适用于较旧的Android（2.x）以及较新的iOS和Android浏览器。

Answer 1

我发现了this有关此问题的CSS-tricks文章。看来最好的方法就是沿着这些方向：

  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+ */

  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

是否可以使用新旧flexbox语法以获得更广泛的兼容性？

1 个答案: