flex布局

首先

display: flex;
flex可去除块级元素的块级特性
flex都是对子元素布局的

主轴、交叉轴

flex-direction: row;  //横向
主轴为水平方向（从左向右），交叉轴为垂直于主轴方向

flex-direction: row-reverse;  //横向
主轴为水平方向（从右向左），交叉轴为垂直于主轴方向

flex-direction: column;    //纵向
主轴为竖直方向（从上向下），交叉轴为垂直于主轴方向

flex-direction: column-reverse;  //纵向
主轴为竖直方向（从下向上），交叉轴为垂直于主轴方向

常用属性 、属性值

justify-content ： 作用于主轴上
align-items：作用于交叉轴上

常用值：
center ： 居中
space-around：等边距
baseline： 基线对齐
space-between： 等距

换行
flex-wrap
  wrap：换行
 nowrap：不换行