這篇文章將為大家詳細(xì)講解有關(guān)如何快速操作移動端Web頁面的CSS3flex布局，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)公司主營鄠邑網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app開發(fā)定制,鄠邑h5微信小程序搭建,鄠邑網(wǎng)站營銷推廣歡迎鄠邑等地區(qū)企業(yè)咨詢

1、開始使用flexbox布局的方法，代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板

1. footer{   
   display:flex;   
   }

2、接下來為footer添加flex-flow屬性：

CSS Code復(fù)制內(nèi)容到剪貼板

1. flex-flow:row wrap;    

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. div{   
   justify-content:center;   
   align-items:center;   
   display:-webkit-flex;   
   }

關(guān)于如何快速操作移動端Web頁面的CSS3flex布局就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。