網(wǎng)頁的傳統(tǒng)布局是基于盒子模型，依賴于display+position+float的方式完成網(wǎng)頁布局，但是這樣對于垂直居中的布局就很難實現(xiàn)。flex布局的瀏覽器支持情況如下圖。

flex布局瀏覽器支持.jpg

Flex布局

Flex布局是彈性布局,為了使用flex布局必須設(shè)置display為flex，webkit的內(nèi)核必須加上-webkit-的前綴。

.flex-container { 
    display: -webkit-flex;/* Safari */ 
    display: flex;
}

如果想讓行內(nèi)元素使用flex布局

.flex-container {
    display: -webkit-inline-flex; /* Safari */
    display: inline-flex;
}

容器設(shè)置flex后，所有的子元素都自動變成flex item，稱為Flex項目。
注意，設(shè)為Flex布局以后，子元素的多列組中所有column-*屬性、float、clear屬性和vertical-align屬性在Flex容器上沒有作用。

Flex布局的基礎(chǔ)知識和概念

如果常規(guī)布局是基于塊和內(nèi)聯(lián)文本流方向，那么Flex布局就是基于“Flex-flow”方向。下圖

CSS3-Flexbox-Model.jpg

main axis：flex容器的主軸
cross axis：flex容器的交叉軸
main start:主軸的開始位置
main end:主軸的結(jié)束位置
cross start:交叉軸的開始位置
cross end:交叉軸的結(jié)束位置
main size:Flex項目的在主軸方向的寬度或高度就是項目的主軸長度，F(xiàn)lex項目的主軸長度屬性是width或height屬性，由哪一個對著主軸方向決定。
cross size:Flex項目的在側(cè)軸方向的寬度或高度就是項目的側(cè)軸長度，F(xiàn)lex項目的側(cè)軸長度屬性是width或height屬性，由哪一個對著側(cè)軸方向決定。