Question

我一直在学习一种过时的flexbox语法（2011年我认为），它使用旧的＆＃34;框＆＃34;属性（-webkit-box, etc）。转换到新flex模型的最佳方法是什么？是否有图表或转换的内容，或者我必须像我是全新的一样学习它？

Answer 1

我没有漂亮的图表，对不起，但我同意这会非常有帮助！您可能会发现需要从头开始学习新模型，但您对旧模型的现有知识将对您有所帮助。

据我所知，现代的flexbox是旧“盒子”模型的超集，所以过渡很有可能，即使不容易。

如果您使用“Pleeease Play”之类的自动前缀工具向后工作，则可以了解旧语法如何更新。

例如，如果你插入这个“新”语法：

/* new syntax */
.container {
  display: flex;
}
.element {
  flex: 1 0 auto;
  flex-direction: column;
}

...该工具将为您生成旧的box属性。（为清楚起见，我删除了“新语法”属性）

/* old syntax */
.container {
  display: -webkit-box;
}
.element {
  -webkit-box-flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}

新语法功能更强大：例如flex属性替换旧的-webkit-box属性，但也是flex-shrink和flex-basis的简写。还有其他新属性，例如flex-wrap等等。在此示例中，我添加了-webkit和-ms浏览器前缀，但您可以根据需要支持的浏览器将其保留。

如何从旧的flexbox过渡到新的？

1 个答案: