溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何快速操作移動端Web頁面的CSS3flex布局，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
1、開始使用flexbox布局的方法，代碼如下：
CSS Code復制內容到剪貼板
footer{
display:flex;
}2、接下來為footer添加flex-flow屬性：
CSS Code復制內容到剪貼板
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:使得每個div的頭部對齊
flex-end:使得每個div的尾部對齊
center:以中心線為基準對齊
stretch:填滿整個區域，即頭部、尾部均對齊
4、justify-content屬性
用于設置留白的形式，在制作一行中有多個部分的時候非常方便。
比如父div中有三個小的div并排顯示，但是它們的總寬度小于父div的總寬度，則可以使用這種方法進行布局，具體參數如下：
flex-start:留白部分在最末端
flex-end:留白部分在最起始的地方
以上兩種留白方式都是把三個小div看成一個整體，留白留在一端
space-between:中間均分留白
space-around:中間+兩側均分留白
以上兩種相當于把三個div塊拆開均分在父div中，二者的差別僅僅在于是不是在兩側也留白
附：利用justify-content的方式使元素垂直水平居中的方式
CSS Code復制內容到剪貼板
div{
justify-content:center;
align-items:center;
display:-webkit-flex;
}關于如何快速操作移動端Web頁面的CSS3flex布局就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
