Flex布局
1 . 传统布局 display属性+position属性+float属性
--------垂直居中不便利
2 . flex 网格布局 css flexbox (弹性布局)
设置为flex布局之后 子元素的float clear vertical-align 失效
@1 任何容器都可以指定为flex布局
display:flex; 盒子元素
display:inline-flex 行内元素
display:-webkit-flex;/*safari*/
3 . 基本概念
@1 被设置为flex的元素 称为容器 他的子元素自动称为容器成员，简称项目
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
4 . 容器的属性
@1: flex-direction 决定主轴的方向
row row-reverse column column-reverse
flex-wrap 默认情况下，项目都排在一条线(轴线)上，flex-wrap属性定义，
如果一条轴线排不下，如何换行
nowrap 默认不换行 全部挤在一行 压缩自身项目
wrap 换行第一行在上方 第二行又从主轴起点开始排列
wrap-reverse 换行 第二行在第一行上面，第二行起点还是主轴起点
flex-flow 是flex-direction 和flex-wrap属性的简写，默认为row nowrap
flex-flow: row || nowrap;
justify-content 定义了项目在主轴的对齐方式
flex-start（左对齐）
flex-end (右对齐) center(居中对齐)
space-between(两端对齐 项目之间的间隔都相等)
space-around(每个项目两侧的距离都相等，
所以项目与项目之间的距离与边框的间隔大一倍)
align-items 项目与交叉轴上的对齐
flex-start 交叉起点对齐
flex-end 交叉的终点对齐
center 交叉中点对齐
baseline 项目第一行文字的基线对齐
stretch 项目未设置搞定或者未auto 则被拉伸
align-content (交叉轴) 定义了多条轴线的对齐方式 用 | 连接
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐 轴线之间的间隔平均
spece-around 没根轴线的两侧距离相等 项目之间的距离是边框的两倍
stretch 轴线沾满整个交叉轴5
5.order属性
@1 定义项目的排列顺序 数值越小 排列越靠前 默认为0
6.flex-grow属性
@1 定义项目的放大比例 默认为0 即如果存在剩余空间 也不放大
如果所有的项目的flex-grow 都为1 ，则将他们等分剩余的空间，如果有一个项目为2 其他为1 则他所所占据的空间比其他多一倍
7.flex-shrink属性
@1定义属性的缩小比例 默认为1 如果空间不足该项目将缩小
如果所有的项目的flex-shrink属性都是1 当空间不足时 都将等比例缩小，如果一个项目的=flex-shrink=0 起他都为1 剩余空间不足时 前者不缩放
8.flex-basis 属性
@ 在分配多余空间之前 项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有剩余空间。如果默认为auto,即项目的本来大小
它可以设置width height 属性一样的值（350px） 改项目占据固定大小
9.flex属性
是flex-grow flex-shrink flex-basis 的简写 默认为 0 1 auto; 后面两个属性可选
10.align-self属性