10.flex-------01.弹性盒（或伸缩盒）

        1、flex 弹性盒（或伸缩盒），是css中又一种布局方式，主要用来代替浮动来完成页面的布局

        2、弹性盒可以使元素具有浮动，使元素随着页面大小的改变而改变

        3、要想使用弹性盒，必须先将一个元素设置为弹性容器，我们可以通过以下方式来设置弹性容器：通过display标签

                一是--------display：flex；将元素设置为块级弹性容器

                二是--------display：online-flex；将元素设置为行内弹性容器

        4、弹性容器的子元素称为弹性元素。注意：一个元素可同时为弹性容器和弹性元素

        5、弹性容器的属性：flex-direction------设置容器中弹性元素的排列方向

                        可选值：row----弹性元素水平排列（自左向右）                  主轴-----自左向右

                                      row-reverse------弹性元素水平排列（自右向左）   主轴-----自右向左

                                      column------弹性元素垂直排列（自上向下）            主轴-----自上向下

                                     column-reverse------弹性元素垂直排列（自下向上）    主轴-----自下向上

        6、主轴：弹性元素排列的方向为主轴；       侧轴：与主轴垂直的方向称之为侧轴

        6、弹性元素的属性：flex-grow和flex-shrink，这两个为0时，子元素不发生变化

                flex-grow ：用来设置弹性元素伸展的系数，设置当弹性容器还有空余空间时，子元素如何伸展。弹性容器的剩余空间会按照比列进行分配。注意：里面的数值越大，元素伸展的越大

                flex-shrink：用来设置弹性元素收缩的系数 ，当弹性容器的空间不足以容纳所有的子元    素时，子元素如何收缩。注意：里面的数值越大，元素收缩的越大，即子元素越小。