小程序中Flex布局

（一）小程序集成Bmob作为数据存储
（二）小程序中Flex布局
（三）小程序使用高德地图获取地理位置
（四）小程序列表条目点击
（五）小程序下拉刷新、上拉加载
（六）小程序总结

Flex布局相对float布局简单、方便。可以减少wxss的代码，同时符合小程序开发文档要求。Flex是Flexible Box的缩写，意为“弹性布局“，使用Flex布局的元素，称为Flex容器(Flex container),简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

一、容器的属性

容器属性	属性值
flex-direction 决定主轴方向	row：主轴为水平方向，起点在左端(默认) row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上沿 column-reverse：主轴为垂直方向，起点在下沿
flex-wrap 如何换行	nowrap：不换行(默认) wrap：换行，第一行在上方 wrap-reverse：换行，第一行在下方
flex-flow flex-direction和flex-wrap的简写形式	row nowrap(默认)
justify-content 主轴的对齐方式	flex-start：左对齐(默认) flex-end：右对齐 center：居中 space-between：两端对齐，项目间隔相等 space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍 space-evenly：项目在主轴上均匀分布，间距一样
align-items 项目在交叉轴上如何对齐	stretch：项目未设置高度或设未auto，占满整个容器的高度 flex-start：交叉轴起点对齐 flex-end：交叉轴终点对齐 center：交叉轴中点对齐 baseline：项目的第一行文字的基线对齐
align-content 多根轴线的对齐方式	stretch：轴线占满整个交叉轴 flex-start：与交叉轴的起点对齐 flex-end：与交叉轴的终点对齐 center：与交叉轴的中点对齐 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布 space-around：每根轴线两侧的间隔豆相等，轴线之间的间隔比轴线与边框的间隔大一倍

二、项目的属性

项目属性	属性值
order 项目的排列顺序	默认0 数值越小，排列越考前
flex-grow 项目的放大比例	默认0（如果存在剩余空间，也不放大）
flex-shrink 项目的缩小比例	默认1（空间不足，项目缩小）
flex-basis 分配多余空间之前，项目占据的主轴空间	默认auto(项目本来大小)
flex flex-grow, flex-shrink 和 flex-basis的简写	auto(默认) 等价于0 1 auto none：等价于0 0 auto 非负数值 0：相当于0 1 0%
align-self 单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性	默认auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 该属性有6个值，除了auto，其他都与align-items属性一样

3、使用Flex

这是我all页面的布局

我们来看这个布局

1、左右分成两个部分（红线）
2、右边部分垂直向下分成五部分（绿线）
3、（黄线）部分显示九张图片

先来实现第一条 左右分成两部分

<view style='display:flex;'>
	<view style='width:20%;height:200rpx;background:#1afa29;'>         </view>
	<view style='width:80%;height:200rpx;background:#1296db;'></view>
</view>

右边部分垂直向下分成五部分

<!--index.wxml-->
<view style='display:flex;'>
  <view style='width:20%;height:200rpx;background:#1afa29;'>
  </view>
  <view style='width:80%;height:200rpx;background:#1296db;'>
      <view style='display:flex;flex-direction: column;'> 
      <text>every</text>
      <text>测试</text>
      <view style='background:#f4ea2a;width:100%;                         height:200rpx'></view>
      <text>address</text>
      <text>date</text>  
      </view>
  </view>
</view>

黄色部分显示九张图片

<!--index.wxml-->
<view style='display:flex;'>
<!--左边部分-->
  <view style='width:20%;height:200rpx;background:#1afa29;'>
  <image src='{{avater}}' style='width:80%;height:130rpx; margin-left:10%'></image>
  </view>
  <!--右边部分-->
  <view style='width:80%;background:#1296db;'>
      <view style='display:flex;flex-direction: column;'> 
      <text>every</text>
      <text>测试</text>
      <!--九张图片-->
      <view style='background:#f4ea2a;width:100%;                         display:flex;flex-wrap:wrap;' >
      
      <image style='width:30%;height:200rpx;padding:1.5%'        src="{{avater}}" wx:for="{{[1,2,3,4,5,6,7,8,9]}}"></image>
      
      
      </view>
      <text>address</text>
      <text>date</text>
      
      </view>


  </view>
</view>

源码下载