flex布局

flex中纵向和横向布局

flex布局中分纵向和横向布局，还有主轴和交叉轴的概念，我们首先要给元素的父级上添加display: flex;;有了这个前提，我们就需要给子元素添加排列的方向等样式。

下面是flex布局中常用的代码：
display: flex;将元素内部的子元素全部设置为弹性盒模型。

flex-direction 用来设置子元素的排布方向；默认是橫向排列。

vertical-align: middle;图片与文字居中对齐
flex-direction: column; 纵向，主轴在垂直方向，起点在上沿。
flex-direction: column-reverse; 纵向，主轴在垂直方向，起点在下沿。
flex-direction: row;横向，主轴在水平方向，起点在左端。
flex-direction: row-reverse;横向，主轴在水平方向，起点在右端。
flex-direction: row-reverse / column-reverse ; 元素内部所有子元素全部倒序。当设置了这个值以后，如果父容器的大小大于子元素宽高和的大小，那么子元素对齐方式会发生改变，原本靠左对齐，之后会靠右对齐，解决办法可以使用justify-content: flex-end;这个样式。当正序的时候，我们设置成justify-content: flex-start；当倒序的时候，我们设计为justify-content: flex-end；如果想让子元素居中，可以用justify-content: center；。
justify-content: space-between;平均分布，justify-content: space-around ;等距分布。

align-items是负责交叉轴上的对齐方式

align-items: center;是交叉轴上的对齐方式。
align-items:baseline;子元素以第一个文字按基线对齐。
当子元素没有设置高度，而父元素设置了这个样式之后 align-items: stretch; ，子元素的高度会拉伸至父元素的高度。
flex-wrap: wrap;超出之后换行，子元素正序排列。wrap-reverse则是子元素倒序排列。
有两点注意：

• 如果在元素的父级用了display: flex;，那么内部的子元素就不再需要添加display:inlink-block;这类的样式了。
• 在小程序中，每个view的宽度默认是100%的，height则是自适应的。

当我们既想元素是弹性盒模型又想元素的尺寸可以自适应。可以将父元素设置为display: inline-flex;