用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

微信小程序开发联盟 首页 教程 查看内容

【基础】微信小程序flex布局

yuzeng84 2017-8-11 11:51

布局基础默认每个View进行垂直布局。每个view占据一行。flex布局(设置display=flex) 平面布局有一个主轴和交叉轴(类似于平面坐标中的X轴和 Y轴) 默认X轴为主轴 Y轴为交叉轴 flex容器属性:针对于容器内的容器 fl ...

布局基础

        

默认每个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元素自身的定义方式

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

 

相对定位

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

绝对定位

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

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
来自: SlSlX的博客

相关阅读