css3 的Flex弹性盒的构造是一个用于页面构造的全新CSS3模块成果。它可以把列表放在同一个标的目的（从左到右或从上到下摆列），并且让这些列表能延伸到占用可用的空间。较为庞大的构造可以通过嵌套一个伸缩容器（flex           

   container）来帮助实现。

   Flexbox可以简单快速的创建一个具有弹性成果的构造，当在一个小屏幕上显示的时候，Flexbox可以让元素在容器（伸缩容器）中进行自由扩展和收缩，从而容易调解整个构造。它的目的是使用常见的构造模式，好比说三列构造，可 

    以非常简单的实现。

 css3引入的flex构造优错误谬误：

长处在于其容易上手，按照flex法则很容易到达某个构造效果。

      错误谬误是：浏览器兼容性对照差，只能兼容到ie9及以上。

  属性：     

 display: flex;  // 弹性盒，界说给父盒子让子元素在一排横向显示

           值： flex 或 inline-flex将其界说为弹性容器。弹性容器内包罗了一个或多个弹性子元素。

      direction ：rto;  //属性为 rtl (right-to-left),弹性子元素的摆列方法也会转变，页面构造也随着转变:从右向左摆列

  flex-direction :   //属性指定了弹性子元素在父容器中的位置。

            值： 

    row：横向从左到右摆列（左对齐），默认的摆列方法。

                row-reverse：反转横向摆列（右对齐，从后往前排，最后一项排在最前面。

                column：纵向摆列。

                column-reverse：反转纵向摆列，从后往前排，，最后一项排在最上面。

justify-content ： //属性应用在弹性父容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

            值 ：

                 flex-start : 默认值，从左向右摆列或从上到下

                 flex-end : 从右向左

                 center :  居中

                 space-between : 平均漫衍 左中右 或上中下 ，摆布或上下紧挨边框

                space-around : 平均漫衍 左中右 或上中下 ，元素在本身位置居中

       ：// 属性

                  flex-start : 默认值，从左向右摆列或从上到下

                  flex-end : 从右向左

                  center :  居中

                  baseline : 如弹性盒子元素的行内轴与侧轴为同一条，则该值与‘flex-start‘等效。其它情况下，该值将参预基线对齐.

                  stretch : 如果指定侧轴巨细的属性值为‘auto‘，则其值会使项目的边距盒的尺寸尽可能接近地址行的尺寸，但同时会遵照‘min/max-width/height‘属性的限制。

flex-wrap: wrap;   //自动换行

 值：

 nowrap : 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。

                 wrap : 弹性容器为多行。该情况下弹性子项溢出的部分会被安排到新行，子项内部会产生断行

                 wrap-reverse 反转 wrap 摆列。