微信小程序开发-布局 flex

flex布局

微信小程序 View 支持两种布局方式：Block 和 Flex
所有 View 默认都是 block。要使用 flex 布局的话需要显式的声明。

1
2
3
4
5
<view class="main">
  <view class="item item1">1</view>
  <view class="item item2">2</view>
  <view class="item item3">3</view>
</view>

1) 未设置 flex，竖向布局

1
2
3

2) flex 布局，在样式中加入 display: flex;

123

flex-direction

横向布局

  • flex-direction: row：从左到右的水平方向为主轴
1
123
  • flex-direction: row-reverse：从右到左的水平方向为主轴
1
321

justify-content

横向的布局属性

  • lex-start：主轴起点对齐(默认值)
1
123
  • flex-end：主轴结束点对齐
1
123
  • center：在主轴中居中对齐
1
123
  • space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
1
1        2        3
  • space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同
1
1      2      3

纵向布局

  • flex-direction: column：从上到下的垂直方向为主轴
  • flex-direction: column-reverse：从下到上的垂直方向为主轴

align-items

纵向布局属性：

  • stretch 填充整个容器(默认值)
  • flex-start 侧轴的起点对齐 （这里我们手动设置下子 view 的高度，来看的明显一些）
  • flex-end 侧轴的终点对齐
  • center 在侧轴中居中对齐
  • baseline 以子元素的第一行文字对齐

align-self

子 View 的属性 align-self，可以覆盖父元素的 align-items 属性，它有 6 个值可选：auto | flex-start | flex-end | center | baseline | stretch （ auto 为继承父元素 align-items 属性，其他和 align-items 一致）

flex-wrap

用于控制子 View 是否换行

  • nowrap ：不换行（默认）
  • wrap ：换行
  • wrap-reverse ：换行，第一行在最下面

order

控制子元素的排列顺序，默认为0。
把 item3 设置 order:-1; 可以把 item3 排在前面

1
312

flex-grow

.wxss中修改代码如下：在 item1 中增加： flex-grow: 1，在 item3 中增加： flex-grow: 2``，表示在一行中如果有剩余空间的话，item3 之外的子 view 占 1 份空间，而 item3 子 view 占 2 份空间(可以理解为剩余空间 item3 最多可以占 2 份空间)。

flex-shrink

.wxss中再增加 4 个子 view 并修改代码如下：i3 的flex-shrink: 0，其余子 view 为 flex-shrink: 1，这表示当空间不足时所有子 view 都等比缩小，但是 i3 的 view 保持大小不变.

flex-basis

注意

flex 是 grow ，shrink ，basis 几个属性的合并

1
2
3
 {
  flex: grow shrink basis;
}

flex-flow 是 flex-direction 和 flex-wrap 两个属性的组合

1
2
3
 {
  flex-flow: wrap row;
}