微信小程序 ：flex 布局

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

display:flex;

概述

1.Flex容器属性

• flex-direction 决定元素的排列方向
• flex-wrap 决定元素如何换行
• flex-flow flex-direction和flex-wrap的简写
• justify-content 元素在主轴上的对齐方式
• align-items 元素在交叉轴的对齐方式

2.Flex容器内元素属性

• flex-grow 当有多余空间时，元素的放大比例
• flex-shrink 当空间不足时，元素的缩小比例
• flex-basis 元素在主轴上占据的空间
• flex 是grow、shrink 、basis的简写
• order 定义元素的排列顺序
• align-self 定义元素自身的对齐方式

写一个简单Demo

wxml：

    1
    2
    3
  

wxss:

 .main { width: 100%; background-color: antiquewhite;}
 .item { height: 100rpx; width: 100rpx;}
 .item1 { background-color: red;}
 .item2 { background-color: dodgerblue;}
 .item3 { background-color: greenyellow;}

效果：

效果图

备注：谁要要使用flex布局，就得在样式里加上 display: flex

flex-direction

首先是横向布局和竖向布局，要设置属性 flex-direction ,它有4个可选值：

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

我们来看下设置 row 和 row-reverse 的区别：

row

row-reverse

justify-content

然后我们要设置元素在横向上的布局方向，需要设置 justify-content 属性，它有5个值可选：

1. flex-start：主轴起点对齐(默认值)

   
   
   

   flex-start

2. flex-end：主轴结束点对齐

   
   
   

   flex-end

3. center：在主轴中居中对齐

   
   
   

   center

4. space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等

   
   
   

   space-between

5. space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同

   
   
   

   space-around

align-items

我们要设置元素在纵向上的布局方向，需要设置 align-items 属性，它有5个值可选：

1. stretch 填充整个容器(默认值)

   
   
   

   stretch

2. flex-start 侧轴的起点对齐 （这里我们手动设置下子 view 的高度，来看的明显一些）

   
   
   

   flex-start

3. flex-end 侧轴的终点对齐

   
   
   

   flex-end

4. center 在侧轴中居中对齐

   
   
   

   center

5. baseline 以子元素的第一行文字对齐

   
   
   

   baseline

align-self

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

比如上面最后一个 baseline 的例子，我们把 item3 设置 align-self:flex-end;

就成了这个样子：

align-self:flex-end

flex-wrap

此外还有 flex-wrap 属性，用于控制子 View 是否换行，有3个值可选：

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

order

子 View 有个 order 属性，可以控制子元素的排列顺序，默认为0。

比如还是上面那个例子，我们把 item3 设置 order:-1; 可以把 item3 排在前面

order

flex-grow

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

flex-shrink

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

flex-shrink

flex-basis

layout.wxss中修改代码如下：其他代码保持不变不变，编译运行，效果如图12所示

.i3{
    flex-shrink: 0;
    flex-basis: 200rpx
}

flex-basis

flex

flex是grow，shink，basis几个属性的合并，layout.wxss中修改代码如下：其他代码保持不变不变，编译运行，效果和图12保持一样

.i3{
    flex:0 0 200rpx
}

flex-flow

flex-flow: wrap row，编译运行结果：如图5所示，flex-flow相当于 flex-direction和flex-wrap两个属性的组合

                            ----------flex 常用布局就这些—————