Flex 是什么
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
Flex布局分为两种，一种行内(display: inline-flex), 另一种标准方式(display: flex)。
Flex布局在浏览器窗口大小改变的时候，或者浏览器页内放大缩小时，对于内容的更改变形有着很好的兼容，相对于传统的基于盒状模型，依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中。
Flex 基本概念
采用flex布局的元素叫做“容器”，包含的所有子元素叫做“项目”
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
Flex容器属性
- flex-direction: 决定主轴的方向
- flex-warp: 一行元素如果放不下，决定是否换行
- flex-flow: 即flex-direction与flex-warp的缩写方式
- justfy-content: 项目在主轴的对齐方式
- align-items: 项目在交叉轴的对齐方式
- align-content: 定义了如果元素换行后的对齐方式
Flex项目属性
- order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0
- flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大(如果一个项目定义为1，另一个定义为2，则该项目从始至终比前一个项目大一倍)
- flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小(定义为0不缩小)
- flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为
auto，即项目的本来大小 - flex: 前四个的缩写
- algin-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖
align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
