首頁  >  文章  >  web前端  >  行動端Web頁面的CSS3 flex版面學習指南

行動端Web頁面的CSS3 flex版面學習指南

高洛峰
高洛峰原創
2017-03-09 17:21:511338瀏覽

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;   
}

以上是行動端Web頁面的CSS3 flex版面學習指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn