如何在CSS3的Flexbox的最新實現中編寫此樣式

Question

我想出瞭如何在2009年實現flexbox時實現樣式，但還有兩種其他實現。短暫的2011年和2012年的部分語法，然後是當前和最終的語法。

如何在當前和最終實現中編寫此代碼？

如果你還可以做2011年的實施，那會很棒！

我正在尋找vendor-prefixes。

display:-moz-box; 
display:-webkit-box; 
display:box; 
-moz-box-align:center; 
-webkit-box-align:center; 
box-align:center; 
-moz-box-orient:horizontal; 
-webkit-box-orient:horizontal; 
box-orient:horizontal; 
-moz-box-pack:center; 
-webkit-box-pack:center; 
box-pack:center; 

Answer 1

一套完整的屬性應該是這樣的：

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

    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 

    -webkit-box-align: center; 
    -moz-box-align: center; 
    -ms-flex-line-pack: center; 
    -webkit-align-content: center; 
    align-content: center; 

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
} 

注意row/horizontal是默認的方向，這是沒有必要添加它，除非你是從覆蓋它以前的其他column/vertical聲明。

設置爲內聯柔性容器遵循相同的命名約定的另一個內嵌特性（如內聯塊，內聯表等）：

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

如果你這樣做是專門爲垂直居中，2009年實施的Firefox有時會成爲問題，因爲它並不總是正確包裝。我的建議是相對於現代性是這樣的，2009年的屬性使用不同的屬性：

http://codepen.io/cimmanon/pen/mxuFa

li { 
    text-align: center; 
    vertical-align: middle; 
    display: inline-block; 
    display: -webkit-inline-box; 
    display: -moz-inline-box; 
    display: -ms-inline-flexbox; 
    display: -webkit-inline-flex; 
    display: inline-flex; 
    /* vertical centering for legacy, horizontal centering for modern */ 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    /* modern Flexbox only */ 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
    /* legacy Flexbox only */ 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
}