css: 作用：布局 美化
在PC端常见的布局：
流式布局
浮动布局
层布局
在移动端常见的布局：
flex布局
flex布局是css3中的提出的一种布局方案，在开发移动端页面时， 基本上都是flex布局，当然，如果你不考虑浏览器的兼容性问题， 你在PC端也可以使用Flex布局。
原因：很多PC端浏览器对CSS3的支持并不友好。
如果使用flex布局，那么就不要想着浮动布局，也就是说flex布局直接杀死了浮动。
flex布局中的几个概念： 1）容器：如果给一个盒子添加了一个display:flex; 那么这个盒子就是一个容器。 2）项目：容器中的直接子元素就是项目（儿子） 项目默认都是在主轴上进行排列的 3）主轴：默认情况下，项目是按照水平方向从左到右进行排列，这个排列方向就是主轴的方式 4）交叉轴：和主轴垂直的那个轴就是交叉轴
对于容器来说，我们需要学习6大属性，以于项目来说，我们也需要学习6大属性，说白了 学习flex，就是学习12个属性，如果你把12个属性掌握住了，那么你就会flex布局。
容器的属性： 意味着下面的属性需要写在容器中
flex-direction: direction本意是方向的意思 作用：用来设置主轴的方向
row：默认值 水平面右 默认情况下，如果你不设置主轴的方向，那么默认就是水平向右的
row-reverse reverse本意是反转的意思 水平向左
column column本意是列的意思 让主轴垂直向下
column-reverse 让主轴垂直向上
注意：项目是从主轴的起点开始排列。
flex-wrap：
如果说容器的宽度比较小，项目的总宽度大于容器的宽度，此时项目在容器中会进行压缩，默认是不
换行的。
如果想你让它换行，通过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： 多行项目，形成多根主轴，此属性是用来设置多根主轴的位置关系
使用前提：
1）多行项目
flex-start: 两根主轴都从开始位置开始排列
flex-end ： 两根主轴都从结束位置开始排列
center：两根主轴从中间位置开始排列
项目的相关属性：
order：设置单个项目在主轴的排列顺序 order的默认值是0
如果数字越小，越靠近主轴的起始点
flex-grow： grow表示生长因子
如果说有富余空间，你想让哪个项目生长。就可以设置flex-grow。
把富余空间分成了三份，每个项目占一份
.son1{ flex-grow:1; }
.son2{ flex-grow:1; }
.son3{ flex-grow:1; }
把富余空间分成了6分，老大占1份，老二占2份，老三占3份
.son1{ flex-grow:1; }
.son2{ flex-grow:2; }
.son3{ flex-grow:3; }
flex-shrink
flex-basis
flex
align-self
