移動端Web頁面的CSS3 flex布局學習指南

Flexbox通常能讓我們更好的操作他的子項目布局,這裡稍微來提煉一下移動端Web頁面的CSS3 flex布局學習指南,需要的朋友可以參考下

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

footer{   display:flex;   }

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

flex-flow:row wrap;

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

3、align-item屬性：
flex-start:使得每個p的頭部對齊
flex-end:使得每個p的尾部對齊
center:以中心線為基準對齊
stretch:填滿整個地區，即頭部、尾部均對齊

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

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