概述
flex布局是目前web开发中使用最多的布局方案
flex布局又叫Flexible 布局，或者弹性布局。目前特别在移动端用的最多，目前PC端也使用越来越多了
两个重要的概念
- 开启了 flex 布局的元素叫 flex container，
- flex container 里面的子元素叫做 flex items
设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
设置display: flex时,container以块的形式存在。而display: inline-flex: flex container以行内元素形式存在。
flex 布局的模型
flex 布局的css 属性
这里特别需要注意一点是display:flex 或者display: inline-flex 是应用在flex container 上， 而flex 属性是应用在flexItem上的，表示的是flex-grow,flex-shrink,flex-basis的复合属性。
flex container 的css属性
1.flex-direction(主轴方向)
flex items 默认都是沿主轴方向从 main start 到 main end 方向排布。 而flex-direction 决定了主轴的方向。
默认值是 row(默认值)，就是默认主轴是水平方向，从左往右。
2.flex-wrap （item在主轴上排列，他的换行方式）
默认值是：nowrap,就是说默认是不换行的，挤在一行的。
flex-flow (因为是复合属性，不加编号)
flex-flow 是flex-direction和flex-wrap的复合属性，而且这俩在写的时候没有顺序要求。
flex-flow: row wrap
3.justify-content(items在主轴的对齐方式)
默认值是 flex-start,默认值是主轴起点对齐。
4.1 align-items(items排列是一行的时候在侧轴方向的对齐方式)
注意默认值是stretch,这个值是代表如果你item的高度没有设置的话，里面的item会在竖直方向被拉伸
4.2 align-content(items排列是多行的时候在侧轴方向的对齐方式)
flex-start
flex items 的css属性
1.flex-grow(伸)
默认值是0.默认不拉伸。
2.flex-shrink(缩)
默认值是1.默认是要收缩的。
3.flex-basis（item的基准长度）
默认值是auto。即item的自身的宽高决定。
flex 复合属性(一定注意是设置在item身上的)
默认值是 flex 0 1 auto,可以简写为flex: 0 auto.
注意flex写三个值，第一个值代表的拉伸，第二个值代表压缩，第三个代表设置的基准长度。
基准长度 auto代表取决于item自身的宽高。其中拉伸和压缩的0和1可以代表是否可以拉伸和压缩，1代表可以，0代表不可以。
flex : 1 1 0;可以拉伸，可以压缩，基准长度为0，然后item自身再不设置宽度，就可以代表ios lwzcollectionview item 均分的效果。
4.order
可以改变items的排布顺序，比方说我原来是一排三个item，按照添加的顺序从左往右边排，现在我就可以设置第一item的order:1,然后本来应该在第一个位置的item就跑到最后一个位置了。
默认为0
5.align-self
在是一行可以通过align-items决定他们在侧轴方向的排列方式，但是有时会遇到一个特殊的，调皮的，不想按照统一设定的侧轴的排列方式，就可以通过这个属性去单独设置。
浏览器对flex布局对我们写代码的辅助
flex 布局应用
1.居中
方式一
方式二
2.块元素和其他元素排到一排，代替浮动
下图中红色框和黄色框
3.均分布局
父元素设置 dispaly:flex items（均分的元素） flex : 1 1 0;可以拉伸，基准长度为0.当然items不能设置宽度了。
4.列表布局举例实例（有时要和margin配合使用）
正常flex布局
一个靠边
一个居中，另外一个靠边
