flex布局:
display: flex;
justify-content: center;——水平居中
flex-start——左对齐
flex-end——右对齐
center——居中
space-between——水平两边贴合对齐
space-around——水平平均对齐(首尾位距离小)
space-evenly——绝对水平平均对齐(首尾距离全部都相等)
align-items: center;——垂直居中
center——居中
flex-start——左对齐
flex-end——右对齐
align-content: flex-start;——垂直贴合对齐
flex-start——左对齐
flex-end——右对齐
space-between——水平两边贴合对齐
space-around——水平平均对齐(首尾位距离小)
space-evenly——绝对水平平均对齐(首尾距离全部都相等)
flex-wrap: wrap;——自动换行属性
flex-wrap: nowrap;
flex-wrap: wrap;
flex-direction: column;——设置水平垂直方向
column——垂直方向
row——水平方向
flex: 1;——设置占至剩移的指数
align-self——设置子项让单个元素垂直对齐方式
flex-start——左对齐
flex-end——右对齐
center——居中