什么是Flex布局
Flex是Flexible Box的缩写 flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。
flex布局中的一些基本概念
容器和项目
什么叫容器
采用flex布局的元素被称作容器。
什么叫项目
在flex布局中的子元素被称作项目。
即父级元素采用flex布局，则父级元素为容器，全部子元素自动成为项目
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的一些属性
flex-direction 属性
flex-direction 属性设置容器主轴的方向
flex-direction:row | row-reverse | column | column=reverse;
flex-wrap属性
flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。
flex-wrap:nowrap | wrap | wrap-reverse;
flex-flow属性
flex-flow属性是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap];,
justify-content 属性
justify-content属性用于设置项目在容器中主轴的对齐方式。
justify-content: flex-start | flex-end | center |space-between | space-around
align-items 属性
align-items定义了项目在交叉轴上是如何对齐显示的
align-items:flex-start | flex-end | center | baseline | stretch
align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
项目的一些属性
设置在项目上的属性主要有：
order 属性
order属性设置项目排序的位置，默认值为0，数值越小越靠前
flex-grow 属性
flex-group属性用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示。
flex-shrink属性表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小。
flex-basis属性
flex-basis属性表示表示项目占据主轴空间的值。默认为auto，表示项目当前默认的大小。如果设置为一个固定的值，则该项目在容器中占据固定的大小。
flex属性
flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；
align-self 属性
align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式。它有六个可能的值。默认值为auto
align-self: flex-start | flex-end | center | baseline | stretch
flex:1详解
flex:1 是 flex-grow:1 flex-shrink:1 flex-basis:0%的缩写 ; 当项目剩余空间不足时，会进行压缩，内容可能会超出实际高度
-
通常实际项目中，伸缩盒子不会直接写width，所以直接flex就好了，表示项目空间不足时，2边都是固定的，中间缩小
-
flex: 1，更愿意理解为项目空间不足时会缩小，项目空间多余时会放大，和3个值得缩写没关系.不简写时（即设置 flex-grow: 1;flex-shrink: 1; flex-basis: 0%）如果该项目设置了width（600-200-300-200）,空间足够时，则项目的宽度是widt的宽度;空间不足时，则会同步缩小
3.flex-basis浏览器根据此属性计算主轴是否有多余空间，比如设置为50px,则有剩余空间600-200-300-50，此时设置flex-grow: 1则会放大该item
4.flex-grow 表示项目剩余的空间不够时，会放大 ，即会首先满足自己的空间，缩小别的空间
5.flex-shrink 表示项目剩余的空间不够时，会缩小 ，600-300-200-200 同步缩小所有的item
flex:auto
flex:auto 是flex-grow:1 flex-shrink:1 flex-basis:auto的缩写;当项目剩余空间不足时，会占据内容宽度，挤压别的项目的宽度；高度不会超出实际高度
以上可以自己写个demo验证下哦！我是写了一个600px的父容器，左侧200px，右侧300px,中间设置200px,同步使用这3个属性进行验证过的，有问题欢迎提出。。。
注意：flex布局的容器可能会出现父元素滚动条不生效的问题哟，实际有遇到过
- 1.一个项目里面的元素写了 flex:0 0 auto结果怎么都不出现滚动条
- 2.一个flex:1的项目上面同时设置了overflow:auto,导致父级（具体记不清是第几级了）没有滚动条
