微信小程序使用flexbox容器，flexbox布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为flexbox布局，其中设为display:flex或者display:inline-flex的元素称为伸缩容器。伸缩容器的子元素称为伸缩项目，伸缩项目使用伸缩布局模型来排版。伸缩布局模型与传统的布局不一样，它按照伸缩流的方向布局。请看下面的经典图片
默认情况下，伸缩容器由两根轴组成，主轴(main)和交叉轴(cross)，其中主轴的开始位置叫main start，结束位置叫main end。交叉轴的开始位置叫cross start，结束位置叫cross end 。伸缩项目的主轴上的占据空间叫main axis，在交叉轴上的占据位置叫cross axis，根据设置情况的不同。主轴既可以是水平轴，也可以是垂直轴。不论哪个轴作为主轴，默认情况下伸缩项目总是沿着主轴，从主轴开始位置到主轴结束位置进行排版，flexbox在浏览器使用需要加上各个浏览器的私有前缀,-webkit ,-moz,-ms,-o，微信小程序全部去掉前缀。
伸缩容器支持的属性有：
1,display
2,flex-direction
3,flex-wrap
4,flex-flow
5,justify-content
6,align-items
7,align-content
8,order
9,flex-grow
10,flex-basis
11,flex
12,align-self
主要介绍这几个属性
display该属性用来指定元素是否为伸缩容器，语法为
display:flex | display:inline-flex
wxml代码为:
<view>
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
<view>9</view>
</view>
wxss代码为
.container{
display: flex;
}
flex:用于产生块级伸缩容器
.container{
display: inline-flex;
}
inline-flex:用于产生行内级伸缩容器，
该属性用于指定主轴方向，语法为
flex-direction: row | row-reverse | column | column-reverse
1)row水平方向从左向右
2)row-reverse水平方向从右向左
4）column伸缩容器为垂直方向，伸缩项目的排版方式为从上到下
5)column-reverse伸缩容器为垂直，伸缩项目为从下到上
该属性用来指定伸缩容器的主轴线方向空间不足的情况下，是否换行以及该如何换行
flex-wrap: nowrap | wrap | wrap-reverse
1)nowrap空间不足是也不换行
2)wrap空间不足可以换行
3) wrap-reverse空间不足可以换行，若主轴为水平轴，则换行的方向为从下到上，和wrap相反