flex盒模型 快速创建tabbar

flex盒模型属性

flex-direction属性决定主轴的方向（即项目的排列方向）

属性:
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-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 未设置宽高，占满整个容器的高度

align-content属性多根轴线的对齐方式

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

flex盒模型tabbar快速布局

父级元素（tabbar）添加属性
display:flex;
justify-content: space-around;
align-items:center;