Flex布局的意义
怎样通过CSS实现垂直居中，由于float布局没有float:center的写法,要实现水平居中可以使用 margin: 0 auto，要求一个父元素里面的两个子元素垂直居中对齐得自己计算margin。但是要求两个未知高度的东西对齐float布局很难解决
flex基本语法
使用 flex 布局首先要设置父容器display:flex,display:inline-flex;两者的区别和inline与block的区别一样flex会另起一行，inline-flex不会另起一行。容器包括外层父容器和内层的子容器，轴包括主轴和交叉轴。
与文档流不同container里的item的流动方向由container控制，大致有四种流动方向
container的语法
主轴语法
- 主轴方向:flex-direction:row|row-reverse|colum|colum—reverse;效果依次如上图，其中默认属性为row；
- flex-warp:warp|nowarp|warp-reverse;控制是否折行，类比正常文档流块元素放不下时会自动折行这就是warp属性，nowarp会在放不下时压缩子元素。默认属性为nowarp。warp-reverse从底下开始
- 主轴的对齐方向默认主轴为横轴除非用flex-direction改变，用justify-content改变，该属性是在里面item未完全利用空间时使用的。justify-content:flex-start|flex-end|center;分别是在主轴开始，主轴结尾，居中。以及不常用的三种
space-around特点每一块item都被两个空白块围绕，空白块面积一致
space-evenly特点每个item之间的空隙大小一样。注意区分区别
次轴语法
- 当item高度不一样时才有次轴，用align-items
- 多行内容，行与行之间的分布用align-content
item语法
- 给item加顺序，默认order为0
.item:first-child{order:100;}
4. flex-basis设置基准大小，表示在不伸缩的情况下子容器的原始尺寸，默认为auto
5. 定制align-items，给单独的items加上align-self:值;改变单独的items纵轴方向
flex相关
- 原来items是块元素在给父元素display:flex后items就表现成了内联元素，所以colum方向的宽度是尽量缩小的。
- 如果一个container里面有两个items，可以使justify-content来左右分布也可以对第二个item加margin-left:auto；
- 关于三栏内容布局一般两边是宽度固定中间适应，中间用flex-grow实现
- 平均布局仍要使用负margin
- 尽量不要把width和height写死，除非有特殊要求，但是在pc上写的页面一般是写死的。一般情况会使用min-width这样页面拉大时会响应，变小时页面超出的部分不会显示。
参考
