flexBox布局

整个布局都以“布局线”贯穿

别人的认识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：项目在任何情况下都不具备弹性伸缩的能力