微信小程序flex布局

布局基础

        

默认每个View进行垂直布局。每个view占据一行。

flex布局（设置display=flex）

        

         平面布局有一个主轴和交叉轴（类似于平面坐标中的X轴和 Y轴）

         默认X轴为主轴 Y轴为交叉轴

 

         flex容器属性：针对于容器内的容器

                   flex-direction排列方向

                            row(默认)         column

 

                   flex-wrap元素换行问题

                            nowrap（不换行）         wrap(换行)

                            wrap-reverse换行反转（多的一行在上面）

                   flex-flow上面两个的简写

                            先定义方向  再定义换行

 

                   justify-content主轴的对齐元素

                            center(沿主轴居中对齐)

                            flex-start（主轴左边、默认方式）      flex-end（主轴右边）

                            space-around（各个元素平分主轴空间）

                            space-between元素两端对齐 中间间隔相同

 

                   align-items交叉轴的对齐方式

                            flex-start  flex-end

                            center

                            stretch（在元素没有设置高度时，占满整个容器的高度）

                            baseline以元素中的文字的底线进行对齐

 

         flex元素属性 针对于容器内的元素

                   flex-grow有多余空间时，元素的放大比例

                            设置多个元素之间的比例，按照比例瓜分剩余空间

 

                   flex-shrink空间不足时，元素的缩小比例

                            默认为1，表示空间不足时，所有元素等比缩小

                            某元素设置为0时，表示不缩小

                            值越大，缩小比例越大。

 

                   flex-basis元素在主轴上占据的空间

                            rpx可能会不生效

 

                   flex是上面三者的简称

                                     放大 缩小 空间

                   order元素排列顺序

                            根据元素个数，数越小越靠前

 

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

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

 

相对定位

         相对于自身进行定位，参照物是自己

绝对定位

是相对于离它最近的已经定位的父级元素进行定位的。

如果所有父级都没有定位，则相对于整个窗口定位。