移動(dòng)端Web頁(yè)面的CSS3flex布局學(xué)習(xí)指南

1、開(kāi)始使用flexbox布局的方法，代碼如下：

footer{ 
display:flex; 
}

2、接下來(lái)為footer添加flex-flow屬性：

flex-flow:row wrap;

row表示按行顯示，wrap設(shè)置當(dāng)父元素過(guò)小時(shí)是否換行。
注意flex-flow是flex-direction和flex-wrap兩個(gè)屬性合在一起定義了，分開(kāi)設(shè)定也可以。
flex-direction的屬性：
row:行顯示；column:列顯示；row-reverse/column-reverse:反方向進(jìn)行顯示

3、align-item屬性：
flex-start:使得每個(gè)p的頭部對(duì)齊
flex-end:使得每個(gè)p的尾部對(duì)齊
center:以中心線為基準(zhǔn)對(duì)齊
stretch:填滿整個(gè)區(qū)域，即頭部、尾部均對(duì)齊

4、justify-content屬性
用于設(shè)置留白的形式，在制作一行中有多個(gè)部分的時(shí)候非常方便。
比如父p中有三個(gè)小的p并排顯示，但是它們的總寬度小于父p的總寬度，則可以使用這種方法進(jìn)行布局，具體參數(shù)如下：
flex-start:留白部分在最末端
flex-end:留白部分在最起始的地方
以上兩種留白方式都是把三個(gè)小p看成一個(gè)整體，留白留在一端
space-between:中間均分留白
space-around:中間+兩側(cè)均分留白
以上兩種相當(dāng)于把三個(gè)p塊拆開(kāi)均分在父p中，二者的差別僅僅在于是不是在兩側(cè)也留白
附：利用justify-content的方式使元素垂直水平居中的方式

p{ 
justify-content:center; 
align-items:center; 
display:-webkit-flex; 
}

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com