小程序模板網(wǎng)

【基礎(chǔ)】微信小程序flex布局

發(fā)布時間:2018-04-23 11:22 所屬欄目:小程序開發(fā)教程

布局基礎(chǔ)

        

默認(rèn)每個View進行垂直布局。每個view占據(jù)一行。

flex布局(設(shè)置display=flex)

        

         平面布局有一個主軸和交叉軸(類似于平面坐標(biāo)中的X軸和 Y軸)

         默認(rèn)X軸為主軸 Y軸為交叉軸

 

         flex容器屬性:針對于容器內(nèi)的容器

                   flex-direction排列方向

                            row(默認(rèn))         column

 

                   flex-wrap元素?fù)Q行問題

                            nowrap(不換行)         wrap(換行)

                            wrap-reverse換行反轉(zhuǎn)(多的一行在上面)

                   flex-flow上面兩個的簡寫

                            先定義方向  再定義換行

 

                   justify-content主軸的對齊元素

                            center(沿主軸居中對齊)

                            flex-start(主軸左邊、默認(rèn)方式)      flex-end(主軸右邊)

                            space-around(各個元素平分主軸空間)

                            space-between元素兩端對齊 中間間隔相同

 

                   align-items交叉軸的對齊方式

                            flex-start  flex-end

                            center

                            stretch(在元素沒有設(shè)置高度時,占滿整個容器的高度)

                            baseline以元素中的文字的底線進行對齊

 

         flex元素屬性 針對于容器內(nèi)的元素

                   flex-grow有多余空間時,元素的放大比例

                            設(shè)置多個元素之間的比例,按照比例瓜分剩余空間

 

                   flex-shrink空間不足時,元素的縮小比例

                            默認(rèn)為1,表示空間不足時,所有元素等比縮小

                            某元素設(shè)置為0時,表示不縮小

                            值越大,縮小比例越大。

 

                   flex-basis元素在主軸上占據(jù)的空間

                            rpx可能會不生效

 

                   flex是上面三者的簡稱

                                     放大 縮小 空間

                   order元素排列順序

                            根據(jù)元素個數(shù),數(shù)越小越靠前

 

                   align-self元素自身的定義方式

                            利于定義某些特殊元素的布局

 

相對定位

         相對于自身進行定位,參照物是自己

絕對定位

是相對于離它最近的已經(jīng)定位的父級元素進行定位的。

如果所有父級都沒有定位,則相對于整個窗口定位。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23912.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢