flex-direction : 属性决定主轴的方向（即项目的排列方向）
 row : 横向，按元素顺序，居左[主轴为水平方向，起点在左端]
 row-reverse ：横向，倒序，居右[主轴为水平方向，起点在右端]
 column ：纵向，按元素顺序，[主轴为垂直方向，起点在上沿]
 column-reverse : 纵向，倒序[主轴为垂直方向，起点在下沿]
flex-wrap : 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
 nowrap : （默认）不换行，盒子会自适应
 wrap : 换行，第一行在上方
 wrap-reverse : 换行，第一行在下方
flex-flow ：<flex-direction> || <flex-wrap> 合并写法
justify-content : 属性定义了项目在主轴上的对齐方式，控制水平方向
flex-start : 左对齐
flex-end : 右对齐
center : 水平居中
space-between : 子元素间隔相等并自适应
space-around : 子元素两端间隔自适应

align-items : 属性定义项目在交叉轴上如何对齐，控制垂直方向
 flex-start : 上对齐
 flex-end : 下对齐
 center : 垂直居中
 baseline : 文字低端对齐
 stretch : 如果项目未设置高度或设为auto，将占满整个容器的高度( 默认值 )
align-content ：属性定义了多根轴线的对齐方式。
 如果项目只有一根轴线，该属性不起作用。( 多个轴 )，控制垂直方向
 flex-start : 多轴上对齐
 flex-end : 多轴上下对齐
 center : 多轴居中
 space-between ： 两端对齐，均分剩余空间

第二：子盒子属性

order : 指定元素权重，默认为 0，权重越大，对应的元素越靠后。在使用时注意 flex-direction 的属性值
flex-grow ：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
 分配空间的权重，按权重比均分剩余空间(注意是宽度，不包含 padding 和 margin )
flex-shrink : 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
 值为 0 ：不缩小
flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex : 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self : 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。[注意换行]
 auto ：默认值
 flex-start ：上对齐
 flex-end ：下对齐
 center : 垂直居中
 baseline : 文本基线对齐(设置所有的item)

其他

 1. 去除苹果点击事件的灰色阴影:-webkit-tap-highlight-color: rgba(0,0,0,0);有些元素需要设置背景色。
 2. 溢出出现省略号 : white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
 3. 指定宽度数字不换行，需要指定换行属性：overflow:hidden; word-wrap:break-word;
 4. 文字平滑：-webkit-font-smoothing：none: 无抗锯齿；subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows；antialiased: 灰度平滑 常用于Android和iOS等移动设备的

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

react实现选中li高亮步骤详解

EasyCanvas绘图库在Pixeler项目开发中使用实战总结