Flexbox是什么
自适应，自我调整，可以show的飞起来的。
请花两分钟阅读下面几条
Flexbox属性也是存在兼容性的：可以参考 解决Flexbox跨浏览器兼容Bug （文中的问题主要是 min-height和 IE下flex-basis的问题。），因为文章是2015年，现在的情况不得而知，如果你真遇到，那么请保持这种意识。
Flexbox布局新旧语法：可以参考 Flex布局新旧混合写法详解（兼容微信）
当然也没有这么夸张，现在谁写个样式，还不得用sass, less，postcss等等，谁写个工程还不用grunt, gulp, webpack等等，这些都有很好的处理。
Flexbox 基本是分 容器属性和 项目属性的, 标记蓝色的是默认值
容器属性 flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
-
flex-direction row || column || row-reverse || column-reverse
属性控制Flex项目沿着主轴（Main Axis）的排列方向。
- flex-wrap wrap || nowrap || wrap-reverse
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
- flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
- justify-content flex-start || flex-end || center || space-between || space-around
项目在主轴上的对齐方式
- align-items flex-start | flex-end | center | baseline | stretch;
定义项目在交叉轴上如何对齐，（flex-wap 值为nowrap的时候有效）
- align-content flex-start | flex-end | center | space-between | space-around | stretch;
多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。（flex-wap 值为wrap且变多根轴的时候有效）
项目的属性 order || flex-grow || flex-shrink || flex-basis || Flex || align-self
- odrder
项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow
项目的放大比例，默认为0，即如果存在剩余空间，也不放大.默认值 0
- flex-shrink
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis
auto | number
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
- flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 None (0 0 auto)。 1代表：flex-grow: 1;lex-shrink: 1;flex-basis: 0%;
align-self
auto | flex-start | flex-end | center | baseline | stretch
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
别嫌弃我写这么多， 容器和项目各6各属性。 其中都还有一个是简写。
我这里就说两点自己的应用吧，
1. 列表一行几列
这个就不怎么介绍了， 设置容器属性 display:flex , 项目属性设置 flex-basis。
2. 首位固定，中间滑动布局
最开始我设计这种是用position:fixed来解决的。这个说是有各种bug，比如键盘遮盖。
后来采用flexbox布局。三步，都不可缺。()
1.设置父容器及以上容器，height:100%.
2. 设置flexbox容器 display:flex ;flex-direction:column
3. 设置项目 header/ footer 的 flex:{0 0 height} 也可以这么设置 flex:1 , height:height (flex-basis的优先级高于height)， 设置中间区域 flex:1，overflow:auto ,
参考：
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
