一、布局
1.css的作用
1）完成布局
2）完成页面美化
2.常见的布局
在PC端常见的布局： 流式布局、 浮动布局、 层布局。
在移动端常见的布局： flex布局。
flex布局是css3中的提出的一种布局方案，在开发移动端页面时，基本上都是flex布局，当然，如果你不
考虑浏览器的兼容性问题，你在PC端也可以使用Flex布局。
原因：很多PC端浏览器对CSS3的支持并不友好。
如果使用flex布局，那么就不要想着浮动布局，也就是说flex布局直接干死了浮动。
3.flex布局中的几个概念
1）容器：如果给一个盒子添加了一个display:flex; 那么这个盒子就是一个容器。
2）项目：容器中的直接子元素就是项目（儿子）。项目默认都是在主轴上进行排列的。
3）主轴：默认情况下，项目是按照水平方向从左到右进行排列，这个排列方向就是主轴的方式。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。
4）交叉轴：和主轴垂直的那个轴就是交叉轴。
交叉轴的开始位置叫做cross start，结束位置叫做cross end。
二、12个属性
对于容器来说，我们需要学习6大属性，以于项目来说，我们也需要学习6大属性，说白了 学习flex，就是学习12个属性，如果你把12个属性掌握住了，那么你就会flex布局。
1.容器的属性
意味着下面的属性需要写在容器中
1）flex-direction: direction本意是方向的意思。作用：用来设置主轴的方向。
row：默认值水平面右。默认情况下，如果你不设置主轴的方向，那么默认就是水平向右的。
row-reverse：reverse本意是反转的意思，水平向左。
column：column本意是列的意思，让主轴垂直向下。
column-reverse：让主轴垂直向上。注意：项目是从主轴的起点开始排列。
2）flex-wrap：如果说容器的宽度比较小，项目的总宽度大于容器的宽度，此时项目在容器中会进行压缩，
默认是不换行的。如果想你让它换行，通过flex-wrap属性来设置。
nowrap：不换行，默认值。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
3）flex-flow：不是一个新的属性，是上面两个属性的复合属性。
flex-flow:是flex-direction属性和flex-wrap属性的简写形式。如：row nowrap 表示：主轴
的水平向右的，不换行。
4）justify-content：用来处理主轴上的富余空间的。
flex-start：表示项目在主轴的开始点排列，富余空间在主轴的结束位置。
flex-end：表示项目在主轴的结束点排列，富余空间在主轴的开始位置。
center:表示项目在主轴的中间位置，富余空间在主轴的两侧。
space-between: 表示富余空间在项目和项目之间。
space-around：around表示环绕的意思，表示富余空间环绕项目。
注意：什么时候使用justify-content，只有有富余空间时才会使用。
5）align-items：理解1：项目在交叉轴上的摆放位置。 理解2：处理项目在交叉轴的富余空间。
flex-start：项目在交叉轴的起来开始排列，富余空间在后面。
flex-end：项目在交叉轴的起来结束位置排列，富余空间在前面。
center:项目在交叉轴的起来中间位置排列，富余空间在两侧。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6）align-content： 多行项目，形成多根主轴，此属性是用来设置多根主轴的位置关系。
flex-start: 两根主轴都从开始位置开始排列。
flex-end ：两根主轴都从结束位置开始排列。
center：两根主轴从中间位置开始排列。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
2.项目的相关属性
1）order：设置单个项目在主轴的排列顺序。order的默认值是0。
如果数字越小，越靠近主轴的起始点。
2）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; }
3）flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的
flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其
他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
4）flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是
否有多余空间。它的默认值为auto，即项目的本来大小。
5）flex
flex属性是flex-grow, flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6）align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为
auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
