@H_301_1@微信小程序使用flexBox容器，flexBox布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为flexBox布局，其中设为display:flex或者display:inline-flex的元素称为伸缩容器。伸缩容器的子元素称为伸缩项目，伸缩项目使用伸缩布局模型来排版。伸缩布局模型与传统的布局不一样，它按照伸缩流的方向布局。请看下面的经典图片
@H_301_1@
@H_301_1@默认情况下，伸缩容器由两根轴组成，主轴(main)和交叉轴(cross)，其中主轴的开始位置叫main start，结束位置叫main end。交叉轴的开始位置叫cross start，结束位置叫cross end 。伸缩项目的主轴上的占据空间叫main axis，在交叉轴上的占据位置叫cross axis，根据设置情况的不同。主轴既可以是水平轴，也可以是垂直轴。不论哪个轴作为主轴，默认情况下伸缩项目总是沿着主轴，从主轴开始位置到主轴结束位置进行排版，flexBox在浏览器使用需要加上各个浏览器的私有前缀,-webkit,-moz,-ms,-o，微信小程序全部去掉前缀。
@H_301_1@1,display
@H_301_1@2,flex-direction
@H_301_1@3,flex-wrap
@H_301_1@4,flex-flow
@H_301_1@5,justify-content
@H_301_1@6,align-items
@H_301_1@7,align-content
@H_301_1@8,order
@H_301_1@9,flex-grow
@H_301_1@10,flex-basis
@H_301_1@11,flex
@H_301_1@12,align-self
@H_301_1@display
@H_301_1@display:flex | display:inline-flex
@H_301_1@<view class="container">
<view class="sp1">1</view>
<view class="sp2">2</view>
<view class="sp3">3</view>
<view class="sp4">4</view>
<view class="sp5">5</view>
<view class="sp6">6</view>
<view class="sp7">7</view>
<view class="sp8">8</view>
<view class="sp9">9</view>
</view>
@H_301_1@.container{
display: flex;
}
@H_301_1@@H_301_1@flex:用于产生块级伸缩容器
@H_301_1@.container{
display: inline-flex;
}
@H_301_1@@H_301_1@inline-flex:用于产生行内级伸缩容器，
@H_301_1@@H_301_1@flex-direction
@H_301_1@@H_301_1@该属性用于指定主轴方向，语法为
@H_301_1@@H_301_1@flex-direction: row | row-reverse | column | column-reverse
@H_301_1@@H_301_1@1)row水平方向从左向右
@H_301_1@2)row-reverse水平方向从右向左
@H_301_1@
@H_301_1@4）column伸缩容器为垂直方向，伸缩项目的排版方式为从上到下
@H_301_1@
@H_301_1@5)column-reverse伸缩容器为垂直，伸缩项目为从下到上
@H_301_1@flex-wrap
@H_301_1@该属性用来指定伸缩容器的主轴线方向空间不足的情况下，是否换行以及该如何换行
@H_301_1@flex-wrap: nowrap | wrap | wrap-reverse
@H_301_1@1)@H_301_1@nowrap空间不足是也不换行
@H_301_1@@H_301_1@2)wrap空间不足可以换行
@H_301_1@@H_301_1@3)@H_301_1@wrap-reverse空间不足可以换行，若主轴为水平轴，则换行的方向为从下到上，和wrap相反
@H_301_1@@H_301_1@@H_301_1@flex-flow
@H_301_1@@H_301_1@@H_301_1@该属性是flex-direction和flex-wrap属性的缩写版本，它同时指定了伸缩容器的主轴和侧轴，其默认属性为row nowrap
@H_301_1@@H_301_1@@H_301_1@flex-flow: flex-direction | flex-wrap
@H_301_1@@H_301_1@@H_301_1@justify-content
@H_301_1@justify-content: flex-start | flex-end | center | space-between | space-around
@H_301_1@1)flex-start伸缩项目向主轴线的起始位置靠齐
@H_301_1@
@H_301_1@2)flex-end 伸缩项目向主轴线的结束位置对齐，
@H_301_1@
@H_301_1@3)center伸缩项目向主轴线的中间位置靠齐
@H_301_1@
@H_301_1@4)space-around伸缩项目会平均的分布在主轴线里，两端保留一半的空间。
@H_301_1@
@H_301_1@5)@H_301_1@space-between伸缩项目会平分在主轴线里，第一个伸缩项目在主轴线的开始位置，最后一个伸缩项目在主轴线的终点位置
@H_301_1@@H_301_1@align-items
@H_301_1@@H_301_1@该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式
@H_301_1@@H_301_1@align-items: flex-start | flex-end | center | baseline | stretch;
@H_301_1@@H_301_1@1)@H_301_1@flex-start伸缩项目沿交叉轴的起始位置对齐
@H_301_1@@H_301_1@@H_301_1@2)flex-end沿交叉轴的结束位置对齐
@H_301_1@@H_301_1@@H_301_1@3)center伸缩项目沿交叉轴的中间位置靠齐
@H_301_1@@H_301_1@@H_301_1@4)baseline伸缩项目根据它们的基线对齐
@H_301_1@@H_301_1@@H_301_1@5)stretch伸缩项目在交叉轴方向拉伸填充整个伸缩容器
@H_301_1@@H_301_1@@H_301_1@
@H_301_1@@H_301_1@@H_301_1@align-content
@H_301_1@@H_301_1@@H_301_1@用来调整伸缩项目出现换行后在交叉轴上的对齐方式，类似于伸缩项目在主轴上使用justify-content
@H_301_1@align-content: flex-start | flex-end | center | space-between | space-around | stretch
@H_301_1@1)flex-start伸缩项目向交叉的起始位置靠齐
@H_301_1@
@H_301_1@2)flex-end伸缩项目向交叉轴的起始位置靠齐
@H_301_1@
@H_301_1@3)center伸缩项目向交叉轴的中间位置靠齐
@H_301_1@
@H_301_1@4)space-between伸缩项目在交叉轴中平均分布
@H_301_1@
@H_301_1@5)space-around伸缩项目在交叉轴平均分布，且两边各有一半空间
@H_301_1@
@H_301_1@6)strech伸缩项目将会在交叉轴上伸展以占用剩余空间
@H_301_1@
