如何從舊的flexbox轉換到新的flexbox？

Question

我一直在學習使用舊的「盒子」屬性（-webkit-box, etc）的過時的flexbox語法（2011我認爲）。轉換到新型號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瀏覽器前綴，但是根據您需要支持哪些瀏覽器，您可能會將這些前綴保留。