flex简介
当我们需要多行多列自适应，任意行对齐时。便可用flex布局实现。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。使用方法：.box{display:flex}
如果一个容器被设置为flex，称为flex容器（flex container）
那么该容器的在文档流中的子元素为flex item。
本文从以下三个方面来介绍：
- 方向
- 弹性
- 对齐
flex-方向
与flex方向有关的属性为：
- flex-direction(弹性的方向)
- flex-wrap（弹性的换行）
- flex-flow
- order（顺序）
flex-direction
flex-direction:row|row-reverse|column-reverse
flex-wrap
flex-wrap:nowrap|wrap|wrap-reverse 默认不换行
flex-flow
flex-flow:<'flex-direction'>||<'flex-wrap'>
order
order:<interger> 初始值－ initial:0
按order值的大小在主轴上排列，值越大越往后排
flex-弹性
- flex-grow
- flex-shrink
- flex-basis
flex-basis
flex-basis:main-size|<width>
设置flex item的初始宽/高
flex-grow
flex-grow:<number>
初始值－initial:0
设置的是元素所能分配到的剩余空间的比例。
具体值是： flex-basis+flew-grow/sum(flew-grow)*remain
首先浏览器会在没有flew-grow的设置下做布局，那么剩余空间就是remain，然后再来看是否有元素设置 flew-grow ,如果有，这个元素她的宽度就等于他的flex－basis再加上 flow-grow/sum(flow-grow)*remain
例子：
如何设置其中一个div为flex-grow:1时
如何再设置其中一个div为flex-grow:2时
flex-shrink
flex-shrink:<number>
默认为－initial:1
具体值是：flex-basis+flew-shrik/sum(flex-shrink)*remain 此时remain为负数
flex
flex:<flex-grow'>||<'flex-shrink'>||<'flex-basis'>
initial:0 1 main-size
对齐
- justify-content
- align-items
- align-self
- align-content
justify-content
设置main-axis 方向上的对齐方式
justify-content:flex-start|flex-end|center|space-between|space-around initial：flex-start
flex-start（默认值）： 主轴起始方向对齐
flex-end：主轴结束方向对齐
center： 居中。
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items
justify-content:flex-start|flex-end|center|baseline|stretch initial：stretch
设置cross-axis方向上的对齐方式
align-self
align-self:auto|flex-start|flex-end|center|baseline|stretch
设置单个flex item 在cross－axis方向上的对齐方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
align-content
align-content:flex-start|flex-end|center|space-between|space-around|stretch initial：stretch
设置cross-axis方向上行对齐方式
