需将display设置为box。
-webkit-box-orient控制主轴是哪一根。
-webkit-box-orient:horizontal;//主轴为水平方向
-webkit-box-orient:vertical;//主轴为水平方向
-webkit-box-dirextion控制主轴方向。
-webkit-box-direction:narmal;//从左往右（从上往下）
-webkit-box-direction:reverse//从右往左（从下往上）
主轴：-webkit-box-pack。
主轴为水平方向时：
-webkit-box-pack:start;//在右边
-webkit-box-pack:end;//在左边
-webkit-box-pack:center;//在两边
-webkit-box-pack:justify;//在项目之间
主轴为垂直方向时：
-webkit-box-pack:start;//在下面
-webkit-box-pack:end;//在上面
-webkit-box-pack:center;//在两边
-webkit-box-pack:justify;//在项目之间
侧轴：-webkit-box-align。
侧轴为水平方向时：
-webkit-box-align:start;//在右边
-webkit-box-align:end;//在左边
-webkit-box-align:center;//在两边
侧轴为垂直方向时：
-webkit-box-align:start;//在下面
-webkit-box-align:end;//在上面
-webkit-box-align:center;//在两边
flex-direction控制主轴是哪一根，控制主轴方向
flex-direction:row;//从左往右 flex-direction:row-reverse;//从右往左 flex-direction:column;//从上往下 flex-direction:column-reverse;//从下往上
主轴：justify-content
justify-content:flex-start;//富裕空间在主轴正方向
justify-content:flex-end;//富裕空间在主轴反方向
justify-content:center;//富裕空间在两边
justify-content:space-between;//富裕空间在项目两边
justify-content:space-around;//富裕空间在项目之间
侧轴：align-items
align-items:flex-start;//富裕空间在侧轴的正方向
align-items:flex-end;//富裕空间在侧轴的反方向
align-items:center;//富裕空间在两边
align-items:baseline;//基线对齐
align-items:stretch;//等高
原文：https://www.cnblogs.com/xiej/p/10061767.html