微信小程序学习（2）

三、 flex介绍

1. flex容器 布局

为什么使用 flex布局

• 小程序在布局方面上建议使用 flex 布局进行排版
• flex 就是一个盒装的弹性布局，自适应
• 简单方便

这里简单介绍下flex简单使用：

1. 父级开启 flex 布局: display:flex

2. 定义flex 容器的布局：

   1. flex-direction: 主轴的方向 (排列方向)
   2. flex-wrap: 换行规格
   3. justify-content: 对齐方式

   注意，这是flex容器布局的主要三中方式，之后会介绍flex容器成员的属性

3. 子级需要是块级元素

a. flex-direction 属性值：

• row 行正向 (从左到右，默认值）
• row-reverse 行反向 (从右到左)
• column 列正向 (从上到下，小程序全局容器一般设置此值)
• column 列方向 (从下到上)

简单演示下

<!-- index.wxml -->
<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>

/** index.wxss */
.container {
  display: flex;
  /*读者可以自己测试下*/
  flex-direction: column; /*这里是从上到下*/
}
.size {
  height: 150rpx; /** 小程序建议使用 rpx 定义大小 */
  width: 150rpx; /** 读者可以去了解下视网膜界限 */
}
.a {
  background-color: red;
}
.b {
  background-color: yellow;
}
.c {
  background-color: blue;
}
.d {
  background-color: black;
}

b. flex-wrap: 换行

• nowarp 不换行 (默认值)
• wrap 换行
• wrap-reverse 倒序换行

/** 修改下样式 */
.container {
  display: flex;
  /*读者可以自己测试下*/
  flex-direction: row; /*这里是从做到右*/
	/*flex-wrap: nowarp;*/ /*子元素宽度过长是，会平均分配给每个子元素按照比例来得到自己元素所得到的宽度*/
  flex-wrap: warp; /** 显示宽度不够，自动换行*/
}
.size {
  height: 150rpx; /** 小程序建议使用 rpx 定义大小 */
 	/*修改*/
  width: 300rpx; /** 读者可以去了解下视网膜界限 */
}

c. justify-content: (主轴)对齐方式，有种类似于 float 浮动

• flex-start: 左对齐(默认)
• flex-end: 右对齐()
• flex-center: 居中对齐（元素间有空白）
• space-between: 两端对齐（元素间有空白，两端没空白）
• space-around: 围绕对齐（元素间有空白，两端也有空白）

/** 修改下样式 */
.container {
  display: flex;
  /*读者可以自己测试下*/
	justify-content: center;/*个人觉得比较常用的是center*/
}
.size {
  height: 150rpx; /** 小程序建议使用 rpx 定义大小 */
 	/*修改*/
  width: 100rpx; /** 读者可以去了解下视网膜界限 */
}

d. 补充：

​ 常用侧轴的布局控制：align-items: 侧轴对齐方式类似 justify-content ，其他的，如果需要，我在介绍

2. flex容器成员的属性

• order: 成员之间的显示顺序(值从小到大依次排列)

• flex: 成员所占屏幕的比例 (使用flex,width属性失效)，

  成员宽度 = 成员flex值 / 成员flex值之和 * 父级宽度

/*修改属性*/
.a {
  background-color: red;
  order: 3;
  flex: 1;
}
.b {
  background-color: yellow;
  order: 1;
  flex: 1;
}
.c {
  background-color: blue;
  order: 2;
  flex: 1;
}
.d {
  background-color: black;
  order: 4;
  flex: 1;
}