微信小程序基础：Flex布局

Flex的定义：

Flex是Flexible Box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性，所有容器都可一种指定为Flex布局。

几种使用方法：

容器：display:flex;
行内元素：display:inline-flex;
webkit内核的浏览器需要：-webkit-flex;
设置为flex后，子元素的float/clear和vertical-align属性将失效。

项目定义：

采用Flex布局的元素，成为Flex容器。所有的子元素为容器成员，称为Flex项目（flex item）.

容器内置属性

容器默认两根轴：水平为main axis和垂直cross axis。水平从左到右，垂直为上到下，开始是start,结束时end.
大小是size.

容器设置样式：

flow-direction:

(项目的排列方式，行是从左到右，列是从上到下)
row,column,row-reverse,column-reverse

flow-wrap属性：

默认情况下项目会按照某一条线来进行排列
nowrap默认：不换行
wrap:换行，第一行在上方
wrap-reverse:换行，第一行在下方

flex-flow是以上两者的简写形式：默认为row,nowrap

justify-content:项目在主轴上的对齐：

flex-start:左对齐，flex-end:右对齐；center：居中
space-between:两端对齐，项目之间的间隔相等。
space-around:每个项目两侧的间距相等，所以项目之间的间隔是项目和容器边界的距离的两倍。

align-items:定义项目如何在交叉轴上对齐：

flex-start:起点对齐;
flex-end:终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch:项目未设置高度或者设为auto,将占满整个容器的高度。

align-content:定义多个轴线的对齐方式，就是多层时候整体项目的对齐方式

与align-items类似;
space-between:与两端对齐，轴线之间的间距平均分布
space-aroun:轴线两侧的间隔都相等

项目的属性：

order:

决定排列顺序，数值越小排列越靠前。默认为0；

flex-grow:

定义项目的放大比例：默认0。可以设置不同项目的放大比例来设置大小。

flex-shrink:

定义缩小比例：默认为1，空间不足时等比例缩小。负值无效。

flex-basis:

定义项目占据的主轴空间即main-size,水平大小。默认为auto,即项目本来大小。可以设置固定的值来设置大小。

flex:

是flex-grow,flex-shrink,flex-basis默认为0 1 auto;
可以不选后两个属性。
两个快捷值;auto:1 1 auto;none:0 1 auto;
优先使用快捷值，不单独写，因为浏览器会自动推算。

align-self:

设置某个项目和其他项目不一样的对齐，可以覆盖align-item,默认为auto即和父元素一样。没有父元素就是stretch;