时间:2021-05-18
1:Flex布局
Flex布局如图1所示
图1
1.1 Flex容器属性
1.2 Flex容器内元素属性
align如果定义会覆写掉容器属性中的justify-content,align-items设置的属性
微信小程序开发工程中,新建文件layout,然后新建各种文件(以layout命名),
在layout.wxml中加入如下代码:
<view class="container1"> <view class="item1"> 1 </view><view class="item1"> 2 </view> <view class="item1"> 3 </view> <view class="item1"> 4 </view></view>在layout.wxss中加入如下代码:
编译运行如图2所示
注:上述代码中在container1容器中加入了4个子元素view(item1),item1的样式文件中设置每个item1的宽高为固定值:100rpx,rpx为与屏幕尺寸相关缩放的单位,不同于固定的px,每个item1的边为1px,实线(soliod),白色(#fff)
图2
修改.container1如下:(增加display:flex;)编译运行如图3所示:可以看出flex布局为默认横向排列元素
.container1{ height: 100%; width:100%; background-color:beige; display:flex;}图3
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
图4
如果修改为如下代码:编译运行如图5所示:保证每个子view都是正方形,然后放不下的第8个子view放到下一行
flex-wrap:wrap
图5
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
图6
justify-content:flex-end (主轴为左到右情况下:右对齐)
编译运行效果如图7所示:
图7
justify-content:flex-start (主轴为左到右情况下:左对齐)不举例显示了
justify-content:space-around---效果如图8所示,每个子view左右都有留边
图8
justify-content:space-between---效果如图9所示,每个子view左右都有留边,但是首尾两个view各自左右对齐不留边
图9
1.1.5容器属性:align-items
上面已经很详细讲解主轴上的对齐方式,这里关于这个交叉轴上的对齐方式同理很简单,就不详细展开了。
1.2.1 容器内元素属性:flex-grow
layout.wxml中修改代码如下:增加i3
<view class="item1 i3"> 3 </view>layout.wxss中修改代码如下:在item1中增加: flex-grow: 1,增加i3,表示在一行中如果有剩余空间的话,i3之外的子view占1份空间,而i3子view占2份空间,编译运行效果如图10所示:可以看出i3view所占据的空间比其余3个子view大,但是没有到2倍
.item1{ height:100rpx; width:100rpx; background-color:cyan; border: 1px solid #fff; flex-grow: 1}.i3{ flex-grow: 2}图10
1.2.2容器内元素属性:flex-shrink
layout.wxml再增加4个子view
layout.wxss中修改代码如下:i3的flex-shrink为0,其余子view为1,这表示当空间不足时所有子view都等比缩小,但是i3的view保持大小不变,编译运行,效果如图11所示
图11
1.2.3容器内元素属性:flex-basis
layout.wxss中修改代码如下:其他代码保持不变不变,编译运行,效果如图12所示
图12
1.2.4容器内元素属性:flex
flex是grow,shink,basis几个属性的合并,layout.wxss中修改代码如下:其他代码保持不变不变,编译运行,效果和图12保持一样
.i3{ flex:0 0 200rpx}1.2.5容器内元素属性:order
layout.wxml中修改代码如下:设置每个view的order属性为其显示的顺序,编译运行,效果如图13所示:
<view > <view > 1 </view><view > 2 </view> <view > 3 </view> <view > 4 </view></view>图13
1.2.6容器内元素属性:align-self
设置每个元素自身的对齐方式
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex.container{display:flex;flex-directi
本文实例讲述了微信小程序Flex布局用法。分享给大家供大家参考,具体如下:Flex布局:FlexibleBox的缩写,意为“弹性布局”,为盒模型提供巨大的灵活性
微信小程序页面布局方式采用的是Flex布局。Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。Flex布局提供了元
开始正题上方Nav基本flex布局再加个padding不需要多讲吧?提一下,微信小程序里input的placeholder样式是写在placeholder-st
微信小程序locationAPI接口:现在微信小程序火了,利用假期时间学习了下,微信小程序的基础知识,嘿嘿!以下是记录学习微信小程序locationAPI接口,