基本概念
1、主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
2、侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
3、方向：默认主轴从左向右，侧轴默认从上到下
4、主轴和侧轴并不是固定不变的，通过flex-direction可以互换
display: flex;//给父盒子加flex属性，父盒子将具有伸缩属性，子盒子默认平铺
效果特征
1、设置了伸缩属性，在没有设置宽度的情况下是100%
2、设置了伸缩属性，行内元素会转化成块级元素，可以设置宽高，独占一行
主轴方向
flex-direction: row;//水平方向（默认） flex-direction: row-reverse;//水平翻转 flex-direction: column;//垂直方向 flex-direction: column-reverse;//垂直翻转
对齐方式
1、justify-content：设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
justify-content: flex-start;//从主轴开始的方向对齐 justify-content: flex-end;//从主轴结束的方向对齐 justify-content: center;//居中对齐 justify-content: space-around;//父盒子中平分 justify-content: space-between;//两端对齐平分
2、align-items：设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items:flex-start;//从侧轴开始的方向对齐 align-items:flex-end;//从侧轴结束的方向对齐 align-items:center;//居中 align-items:baseline;//基线对齐，默认同flex-start align-items:stretch;//拉伸
参考地址：地址