移動(dòng)端Web頁面的CSS3 flex布局快速上手指南
CSDN Blog 發(fā)布時(shí)間：2016-05-31 12:00:37 作者：fareise 
我要評(píng)論
我要評(píng)論Flexbox通常能讓我們更好的操作他的子元素布局,這里稍微來提煉一下移動(dòng)端Web頁面的CSS3 flex布局快速上手指南,需要的朋友可以參考下
1、開始使用flexbox布局的方法，代碼如下：
2、接下來為footer添加flex-flow屬性：
CSS Code復(fù)制內(nèi)容到剪貼板
- footer{
- display:flex;
- }
CSS Code復(fù)制內(nèi)容到剪貼板
- 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的頭部對(duì)齊
flex-end:使得每個(gè)div的尾部對(duì)齊
center:以中心線為基準(zhǔn)對(duì)齊
stretch:填滿整個(gè)區(qū)域，即頭部、尾部均對(duì)齊
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)容到剪貼板
- div{
- justify-content:center;
- align-items:center;
- display:-webkit-flex;
- }
相關(guān)文章
這篇文章主要介紹了10分鐘理解CSS3 FlexBox彈性布局的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-20
這篇文章主要介紹了CSS3 Flex 彈性布局實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-11-01
這篇文章主要介紹了詳解CSS3伸縮布局盒模型Flex布局的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-20
本篇文章主要介紹了淺談CSS3中display屬性的Flex布局的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-14實(shí)例講解CSS3中的box-flex彈性盒屬性布局
flex布局毫無疑問是當(dāng)今Web頁面的最強(qiáng)大布局方式,box-flex彈性盒模型是其中的一個(gè)代表,這里我們就來以實(shí)例講解CSS3中的box-flex彈性盒模型布局2023-06-22
Flexbox布局模塊旨在提供一個(gè)更有效的方式，在一個(gè)容器里面去布局分配空間。這篇文章給大家介紹CSS3中的Flex布局，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或2020-04-27
