一.在父盒子上设置样式
1.display:flex;让盒子变成一个伸缩盒子
2.flex-direction 控制主轴方向
flex-direction:row 水平往右；
flex-direction:column 垂直往右；
3.justify-content 主轴对齐方式
justify-content:flex-start ;往主轴开始位置对齐
justify-content:flex-end ;往主轴结束位置对齐
justify-content:center ;居中对齐
justify-content:space-between;让盒子在主轴方向平均分布
justify-content:space-around;让盒子在主轴方向平均分布，两端不留空隙
4.align-items 侧轴单行对齐方式
align-items:flex-start;往侧轴开始位置对齐
align-items:flex-end;往侧轴结束位置对齐
align-items:center;往侧轴方向垂直对齐
align-items:stretch;往侧轴方向拉伸，盒子不能设置高度
5.flex-wrap 控制盒子换行
6.align-content 侧轴多行对齐方式
align-content:flex-start ; 往侧轴开始位置对齐
align-content:flex-end;往侧轴结束位置对齐
align-content:center;往侧轴方向垂直对齐
align-content:space-between;让盒子在侧轴方向平均分布
align-content:space-around;让盒子在侧轴方向平均分布，两端不留空隙
align-content:stretch;往侧轴方向拉伸，盒子不能设置高度
二.在子元素设置样式
1.flex 可以分数分配主轴的剩余空间，在排布完设置了宽高的盒子之后，再分配空间
2.order:控制子元素的排布顺序，数值越小，越靠前。
3.align-self 控制自己在侧轴的对齐方式
align-self::flex-start;;往侧轴开始位置对齐
align-self:flex-end;往侧轴结束位置对齐
align-self::center;往侧轴方向垂直对齐
align-self::stretch;往侧轴方向拉伸，盒子不能设置高度
原文：https://www.cnblogs.com/zhaodz/p/11565342.html