微信小程序_(组件)flex布局
小程序建议使用flex布局进行排版
flex是一个盒装弹性布局
flex是一个容器，所有子元素都是他的成员
定义布局：display:flex
flex容器的属性：
一、flex-direction：排列方向
二、flex-wrap：换行规则
三、justify-content：对齐方式
四、order：成员之间的显示顺序
五、flex：成员所占屏幕的比例
一、flex-direction：排列方向
【默认】row：从左到右行排序
row-reverse：从右到左行排序
colomn：从上到下列排序
colomn-reverse：从下到上列排序
index.html中定义五个<view>分别加上a、b、c、d、e五个文本标签，微信小程序中默认flex-direction:row
<!--index.wxml-->
Cynical丶Gary
<view class="container"> <view class='a size'>a</view>
<view class='b size'>b</view>
<view class='c size'>c</view>
<view class='d size'>d</view>
<view class='e size'>e</view> </view>
index.html
.container{
display: flex;
/* 默认从左到右排序 */
/* flex-direction: row; */
/* 从右到左排序 */
/* flex-direction: row-reverse; */
/* 从上到下排序 */
/* flex-direction: column; */
/* 从下到上排序 */
/* flex-direction: column-reverse; */
}
.size{
width: 150rpx;
height: 150rpx;
}
.a{
background: red;
}
.b{
background: yellow;
}
.c{
background: blue;
}
.d{
background: green;
}
.e{
background: orange;
}
index.wxss
二、flex-wrap：换行规则
【默认】nowrap：不换行
wrap：换行
当五个元素size超出微信小程序横向排版时（320），微信小程序默认使用flex-wrap: nowrap不换行
<!--index.wxml-->
Cynical丶Gary
<view class="container"> <view class='a size'>a</view>
<view class='b size'>b</view>
<view class='c size'>c</view>
<view class='d size'>d</view>
<view class='e size'>e</view> </view>
index.wxml
.container{
display: flex;
/* 默认不换行 */
/* flex-wrap: nowrap; */
/* 换行 */
/* flex-wrap: wrap; */
/* 逆向换行 */
/* flex-wrap: wrap-reverse; */
}
.size{
width: 500rpx;
height: 150rpx;
}
.a{
background: red;
}
.b{
background: yellow;
}
.c{
background: blue;
}
.d{
background: green;
}
.e{
background: orange;
}
index.wxss
三、justify-content：对齐方式
【默认】flex-start：从左到右，向左对齐
flex-end：从右到左，向右对齐
center：居中对齐
space-between：块级元素中间有空格
space-around：让空格围绕在成员周围
当五个元素并列排序size未超出微信小程序横向布局
<!--index.wxml-->
Cynical丶Gary
<view class="container"> <view class='a size'>a</view>
<view class='b size'>b</view>
<view class='c size'>c</view>
<view class='d size'>d</view>
<view class='e size'>e</view> </view>
index.wxml
.container{
display: flex;
/* flex-start:默认左对齐 */
/* justify-content: flex-start; */
/* flex-end:向右对齐 */
/* justify-content: flex-end; */
/* center:居中对齐 */
/* justify-content: center; */
/* space-between:块级元素中间有空格 */
/* justify-content: space-between; */
/* space-around:让空格围绕在成员周围 */
/* justify-content:space-around; */
}
.size{
width: 100rpx;
height: 150rpx;
}
.a{
background: red;
}
.b{
background: yellow;
}
.c{
background: blue;
}
.d{
background: green;
}
.e{
background: orange;
}
index.wxss
四、order：成员之间的显示顺序
五个元素并列排序由order属性决定，本来d和e中order属性分别是4和5，现将order属性改为5和4，可见d和e块级元素位置进行了交换
<!--index.wxml-->
Cynical丶Gary
<view class="container"> <view class='a size'>a</view>
<view class='b size'>b</view>
<view class='c size'>c</view>
<view class='d size'>d</view>
<view class='e size'>e</view> </view>
index.wxml
.container{
display: flex;
}
.size{
width: 100rpx;
height: 150rpx;
}
.a{
background: red;
order:;
}
.b{
background: yellow;
order:;
}
.c{
background: blue;
order:;
}
.d{
background: green;
order:;
}
.e{
background: orange;
order:;
}
index.wxss
五、flex：成员所占屏幕的比例
当给五个块级元素a、b、c、d、e设置order为1时候，每个元素所占当行比例的1/5，当将a的order设置为3时，a元素占当行比例的3/(3+1+1+1+1)，依次类推
<!--index.wxml-->
Cynical丶Gary
<view class="container"> <view class='a size'>a</view>
<view class='b size'>b</view>
<view class='c size'>c</view>
<view class='d size'>d</view>
<view class='e size'>e</view> </view>
index.wxml
.container{
display: flex;
}
.size{
width: 100rpx;
height: 150rpx;
}
.a{
background: red;
order:;
flex:;
}
.b{
background: yellow;
order:;
flex:;
}
.c{
background: blue;
order:;
flex:;
}
.d{
background: green;
order:;
flex:;
}
.e{
background: orange;
order:;
flex:;
}
index.wxss
最新文章
- bzoj3555: [Ctsc2014]企鹅QQ （Hash）
- Asp.Net Form验证不通过,重复登录
- Spark ML 文本的分类
- IntelliJ IDEA 2016.2.4 最新版激活方法
- bmp格式图片文件读取
- Codeforces Round #324 (Div. 2) D. Dima and Lisa 哥德巴赫猜想
- 【转】搭建Mac OS X下cocos2d-x的Android开发环境
- HDOJ(HDU) 2521 反素数(因子个数~)
- css（）和 attr（）的区别
- sql server 修改字段大小
- TComponent与String的转换（得到控件的DFM格式的描述）
- CodeForces 525D Arthur and Walls
- [转]20个令人惊叹的桌面Docker容器
- spring各个版本开发包下载
- DeepLearning.ai学习笔记（四）卷积神经网络 -- week2深度卷积神经网络 实例探究
- C# 应用程序单例（禁止多开） 获取.net版本号 以及 管理员权限
- IDEA复制某个类的包名路径
- mybatis一对多关联查询——（九）
- 案例：使用scan IP无法连接数据库
- SqlServer循环执行存储过程