flex布局及属性

flex布局中的几个概念：
1）容器：如果给一个盒子添加了一个display:flex; 那么这个盒子就是一个容器。
2）项目：容器中的直接子元素就是项目（儿子） 项目默认都是在主轴上进行排列的
3）主轴：默认情况下，项目是按照水平方向从左到右进行排列，这个排列方向就是主轴的方式
4）交叉轴：和主轴垂直的那个轴就是交叉轴

容器的属性： 
flex-direction: direction本意是方向的意思 作用：用来设置主轴的方向
row：默认值 水平面右 默认情况下，如果你不设置主轴的方向，那么默认就是水平向右的
row-reverse reverse本意是反转的意思 水平向左
column column本意是列的意思 让主轴垂直向下
column-reverse 让主轴垂直向上
注意：项目是从主轴的起点开始排列。
flex-wrap：nowrap：不换行 默认值/wrap ： 换行flex-flow：不是一个新的属性，是上面两个属性的复合属性
flex-flow:是flex-direction属性和flex-wrap属性的简写形式
如：row nowrap 表示：主轴的水平向右的 不换行
justify-content：用来处理主轴上的富余空间的
flex-start：表示项目在主轴的开始点排列，富余空间在主轴的结束位置
flex-end：表示项目在主轴的结束点排列，富余空间在主轴的开始位置
center: 表示项目在主轴的中间位置，富余空间在主轴的两侧
space-between: 表示富余空间在项目和项目之间
space-around：around表示环绕的意思 表示富余空间环绕项目
注意：什么时候使用justify-content，只有有富余空间时才会使用
align-items： 理解1：项目在交叉轴上的摆放位置 理解2：处理项目在交叉轴的富余空间
flex-start：项目在交叉轴的起来开始排列，富余空间在后面
flex-end：：项目在交叉轴的起来结束位置排列，富余空间在前面
center: 项目在交叉轴的起来中间位置排列，富余空间在两侧
align-content： 多行项目，形成多根主轴，此属性是用来设置多根主轴的位置关系