flex弹性盒子（弹性容器和弹性元素的样式）

一。弹性容器的样式

1. flex-wrap   设置弹性元素是否在弹性容器中换行

             可选值：nowrap 默认值，元素不会自动换行

                            wrap 元素沿着 辅轴方向自动换行

2.justify-content   如何分配主轴上的空白空间

            可选值：flex-start 元素沿着主轴的起边排列

                          flex-end 元素沿着主轴的终边排列

                          center 元素居中排列

                          space-around 空白分布到元素两侧

                          space-between 空白分配到元素间

                          space-evenly 空白分配到元素的一侧

 3.align-items  元素在辅轴上如何对齐

               可选值： stretch 默认值 将元素的长度设置为相同的值  

                               flex-start 元素不会拉伸 沿着辅轴起边对齐            

                               flex-end 元素不会拉伸 沿着辅轴终边对齐

                               center 垂直居中  

                               baseline 基线对齐

4.align-content:   辅轴上的空白空间分配（多行）;

                可选值：同上述的justify-content。

5.实例：利用flex弹性盒子，让元素垂直水平居中

 

 二。弹性元素的样式

1.flex-grow  用于设置增长系数

                flex-grow: 1; 

2.flex-shrink 用于设置收缩系数

                缩减的多少是根据 缩减系数 和 元素大小 共同决定。

                flex-shrink: 1;

3.flex-basis  元素基础长度

                指定元素在主轴上的基础长度；            

                  ---如果主轴是横向的 则该值指定的就是元素的宽度；

                  ---如果主轴是纵向的 则该值指定的就是元素的高度；

                  --默认值 auto 表示参考元素自身的高度和宽度；

                  --如果传递了一个具体的数值，则以该值为准；

                flex-basis: auto；

4.简写形式

          flex：1 1 auto

         解释： flex：增长系数   缩减系数    基础长度     

             可选值例子：

                initial   "0 1 auto"

                 auto    "1 1 auto"

                 none    "0 0 auto" 弹性元素没有弹性

5.实例