浅谈微信小程序flex布局基础
1:Flex布局Flex布局如图1所示
1.1 Flex容器属性1.2 Flex容器内元素属性align如果定义会覆写掉容器属性中的justify-content,align-items设置的属性 微信小程序开发工程中,新建文件layout,然后新建各种文件(以layout命名), 在layout.wxml中加入如下代码: <view class="item1">
1 <view class="item1"> <view class="item1"> <view class="item1"> 在layout.wxss中加入如下代码: .item1{
height:100rpx; width:100rpx; background-color:cyan; border: 1px solid #fff } 编译运行如图2所示 注:上述代码中在container1容器中加入了4个子元素view(item1),item1的样式文件中设置每个item1的宽高为固定值:100rpx,rpx为与屏幕尺寸相关缩放的单位,不同于固定的px,每个item1的边为1px,实线(soliod),白色(#fff)
修改.container1如下:(增加display:flex;)编译运行如图3所示:可以看出flex布局为默认横向排列元素
1.1.1 容器属性:flex-direction 在.container1增加如下代码:表示设置flex布局纵向排列元素(从左到右为交叉轴,从上到下为主轴),如图2所示。(row:flex布局横向排列元素---从左到右为主轴,从上到下为交叉轴) flex-direction:column 1.1.2 容器属性:flex-wrap 在.container1增加如下代码:同时在layout.wxml中复制元素代码到8个元素view,编译运行,效果如图4所示,可以看出本来高宽为100rpx,正方形的view已经变形为长方形。 flex-wrap:nowrap
如果修改为如下代码:编译运行如图5所示:保证每个子view都是正方形,然后放不下的第8个子view放到下一行 flex-wrap:wrap
1.1.3容器属性:flex-flow flex-flow: wrap row,编译运行结果:如图5所示,flex-flow相当于flex-direction和flex-wrap两个属性的组合 1.1.4容器属性:justify-content 在.container1增加如下代码:编译运行如图6所示。表示在主轴上的对齐方式,由于上面代码我们设置flex-flow: wrap row---相当于主轴为从左到右,所以一行显示不下的第8个元素在下一行居中显示,而前七个子view,也在一行中居中显示,左右两侧就有空白留边 justify-content:center
.i3{
flex-grow: 2 }
.i3{
flex-shrink: 0 }
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |