flex 容器属性
1、flex-direction // 决定了主轴方向 flex-direction：row 横向X 从左往右排列 flex-direction：row-revers横向X 从右往左排列 flex-direction：column 纵向Y 从上往下排列 flex-direction：row-revers 纵向Y 从下往上排列
2、flex-wrap 父级设置 flex-wrap:nowrap; //不换行,子级如果设置了宽度会改变子级的宽度,自适应 flex-wrap:wrap; //自动换行,根据子元素的宽度，如果父级宽度不够就留白 flex-wrap:wrap-reverse;//自动换行上下切换
注： flex-flow 是flex-direction和flex-wrap的缩写 例：flex-flow:column wrap;
3、justify-content justify-content:flex-start;//左侧对齐 justify-content:flex-end;//右侧对齐 justify-content:center;//居中对齐 可以实现无宽高元素相对父级左右居中 justify-content:space-between;//两端对齐 元素之间的空格相等（前提是子元素的总宽度没有父级的宽，要不就没有空间了）； justify-content:space-around;每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
4、 align-items 属性定义项目在交叉轴上如何对齐。 align-item:flex-start; //自父元素自左往右自上往下排列 align-item：flex-end;//靠下自左往右排列 align-item:baseline;// 所有子元素文字以第一个子元素的文字底部基线对齐，即使元素高度不同， 文字底部基线强制一致 （也就是说即使子元素自身的高度不同 文字也会在一条直线上）; align-item:stretch;（是一个默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 align-item:center;// 垂直居中‘ 注： align-item:center;(垂直居中) 与 justify-content:center;(左右居中)配合可实现单个子元素相对于父级元素上下左右居中（未设置宽高也可以） align-content
5、align-content //适用于多列布局 flex-start：//自父元素自左往右自上往下排列 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：如果三列布局 上下两列的靠上靠下中间一列居中 与上下间隔相对。 space-around：上下轴线两侧(不靠边框侧)的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。
四、项目的属性
以下6个属性设置在项目上。
order flex-grow flex-shrink flex-basis flex align-self
----------未完待总结
flex实现左侧固定右边自适应 和 两侧固定 中间自适应 代码如下
