小程序开发之【前端开发】【学习第三节】【二】
flex布局
flex布局主要由容器和项目构成。采用flex布局的元素，称为flex容器（flex container），它的所有直接子元素自动成为容器成员，称为flex项目（flex item）。可以通过设置display:flex或display:inline-flex将任何一个元素指定为flex布局。容器默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（main axis），主轴开始的位置叫main start，结束位置叫main end，和主轴的方向有关；交叉轴开始的位置叫cross start，结束cross end，和交叉轴方向有关。项目默认从主轴开始的位置到主轴结束的位置进行排列，项目在主轴上占有的空间叫main size，交叉轴上叫cross size。
容器的属性
1.display指定元素是否为flex布局
.mybox{display:flex | inline-flex;}
flex产生块级flex布局
inline-flex产生行内flex布局，符合行内元素的特性，同时符合flex规范
设置flex布局以后，子元素的float、clear和vertical-align属性将会失效
2.flex-direction，用于指定主轴的方向，即项目排列的方向
.mybox{flext-direction:row | row-reverse | colum | colum-reverse;}
row：主轴为水平，起点在左，默认值
row-reverse：起点在右
colum：主轴为垂直，起点在上
colum-reverse：起点在下
3.flex-wrap，一般来说，项目都排在一条线上，flex-wrap用来指定如果一套轴线放不下，该如何换行。
.mybox{flex-wrap:nowrap | wrap | wrap-reverse;}
nowrap:不换行，默认值
wrap:换行，第一行在上方
wrap-reverse:换行，第一行在下方。当设置换行时，还需要设置align-item属性配合自动换行。并且align-item值不能为stretch。
4.flex-flow是flex-direction和flex-wrap的简写形式。默认值为row nowrap.
5.justify-content定义项目在主轴上的对齐方式
flex-start：左对齐，默认值
flex-end：右对齐
center：区中
space-between：两端对其，项目之间间隔相等
space-around：每个项目两侧间隔相等。项目之间的间隔比项目与边框间隔大一倍。
6.align-items在交叉轴上的对齐。
flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴中线对齐
baseline：项目根据它们第一行文字基线对齐
stretch：如果项目未设置高度或auto，项目将在交叉轴方向拉伸填满整个容器，默认值。
7.align-content，定义项目多根轴线（出现换行后）在交叉轴的对齐方式。
flex-start
flex-end
center
space-between
space-around
stretch