整个布局都以“布局线”贯穿
别人的认识OK：http://www.jianshu.com/p/e3e994411e96
先整体分析怎么去布局
item中item，item中item，，，只要不是最底层都是item，所以所有布局属性都适用。
注意：不设置宽度默认占满，，，，但高度必须的设置（没有默认值）
注意：外层统一设置，越少越好。里面的item才能更好的去各自设置
Flexbox 布局涉及 Flex 容器（Flex Container）和 Flex 项目（Flex Item）。
布局默认原则：从左到右，从上到下，默认按主轴流向，不换行
属性渲染设置：Flex 容器的display属性为flex或flexbox。flex属性使得容器渲染为块级元素【注意，这里控件都可以设置成块级元素】，而inline-flex则使其渲染为行内元素。
容器引入了主轴和侧轴的概念：
主轴起点（Main Start）：流的起点
主轴终点（Main End）：流的终点
主轴方向（Main Direction，有时也称作流方向，即 Flow Direction）
侧轴起点（Cross Start）：流的起点
侧轴终点（Cross End）：流的终点
侧轴方向 （Cross Direction）：流的方向
上述是对flexBox的认识，下面则是介绍主要属性等
容器属性总结
flex-direction：flex-direction能够改变 Flex 容器的轴向。flex-direction的默认值为row，即按照writing-mode的方向对 Flex 项目进行排布，默认情况下从左到右，从上往下。【属性值：row:默认值。。 column：设置主轴方向向下。。 row-reverse：主轴起点和终点对换。。column：主轴与侧轴对换。。column-reverse：与column的效果相同】
justify-content：设置在主轴的对齐方式，
align-items：设置在侧轴的对齐方式
flex-wrap：设置布局线（换行等属性设置）
属性值：
nowrap（默认值）：不换行
wrap：当一条 Flex 布局线无法容纳所有 Flex 项目时，就会换行
wrap-reverse：效果与wrap相同，只是 Flex 布局线将沿与侧轴相反的方向添加
align-content：align-content能够影响flex-wrap的行为。它与align-items类似，但是并不是用于对齐 Flex 项目，而是用于对齐 Flex 布局线。
flex-flow：flex-flow是flex-direction和flex-wrap的简写：
例如：
Flex 项目（item）之属性
order：order最为简单，它控制着 Flex 项目的渲染顺序【属性值：0、1、2等】
margin：周边局（特殊属性：auto/////margin: auto【居中】///margin-right: auto;，从而使得该项目右边所有多余的空白都被吸收掉）
align-self:设置某个item的对齐方式
flex:通过指定一个数字，来确定当前 Flex 项目占主轴剩余空间的比例（特殊：flex属性都设置为 1 是一项非常有用的技巧，此时主轴剩余空间将被平均分配给各个 Flex 项目）
属性：
initial：项目将会失去弹性伸缩能力，但是在必要的时候仍然能够缩小（被挤小）
auto:拥有在主轴上进行弹性伸缩的所有能力
none：项目在任何情况下都不具备弹性伸缩的能力
