小程序教学四（Flex布局）

在以前我们在网页中写布局的时候一般都是使用绝对布局和相对布局的或者是使用Float浮动布局，但是现在我们新增了一种布局模式，它就是Flex布局。

Flex布局：是2009年由W3C提出的一种布局方式，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

下面我讲基于小程序来为大家介绍Flex布局

Flex常用属性

1.flex-direction: row | row-reverse | column | column-reverse

该属性决定了主轴的方向
row：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column(默认值)：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-direction

2.justify-content: flex-start | flex-end | center | space-between | space-around

该属性决定了伸缩项目在主轴线的对齐方式
flex-start(默认值)：伸缩项目向一行的起始位置靠齐。
flex-end：伸缩项目向一行的结束位置靠齐。
center：伸缩项目向一行的中间位置靠齐。
space-between：两端对齐，项目之间的间隔都相等。
space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。

justify-content

3.align-items: flex-start | flex-end | center | baseline | stretch

该属性决定了侧轴（垂直于主轴）的对齐方式。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐 。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-items

4. flex-wrap: nowrap | wrap | wrap-reverse

该属性决定了侧轴（垂直于主轴）当一行排不下的时候如何换行。
nowrap(默认值)：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。（和wrap相反）

flex-wrap

5.flex-flow

flex-flow 等价于 flex-direction ➕ flex-wrap
flex-flow是一种简写

6.align-content: flex-start | flex-end | center | space-between | space-around | stretch

该属性决定了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

align-content

持续更新中...