CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

一、给父元素设置的属性：

1、display：flex 表示给这个盒子设置为弹性盒模型

2、flex-direction：设置主轴方向，顺序指定了弹性子元素在父容器中的位置

   取值：

　　　　row  ：默认在一行内排列

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

            column：纵向排列。

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

3、flex-wrap：是否换行

     取值：nowrap（默认值，不换行），wrap（换行）

4、flex-flow：设置主轴方向和是否换行的总写

5、justify-content:设置子元素（子项目）在主轴方向的对齐方式

     取值：

          ■ flex-start默认，顶端对齐

          ■ flex-end末端对齐

          ■ center居中对齐

          ■ space-between两端对齐，中间自动分配

          ■ space-around自动分配距离

6、align-items：设置单行子项目在侧轴的对齐方式

     取值：

         flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

         flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

         center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

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

7、align-content：设置多行子项目在侧轴的对齐方式

   取值：跟justify-content一样

二、给子元素设置

    1、flex：number，子项目占父元素的比份。

    2、align-self：定义单个子项目在侧轴的对齐方式

    3、order：number，排列的顺序，不设置的时候，排在最前面，设置的时候，值越小越靠前。