css弹性盒

一，怪异盒模型

       box-sizing用来设置盒模型的解析规则的

       box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

        content-box(按标准盒模型的规则解析)这是由CSS2.1 规定的宽度高度行为。

                   宽度和高度分别应用到元素的内容框。

                   在宽度和高度之外绘制元素的内边距和边框。

         border-box(按怪异盒模型的规则解析)为元素设定的宽度和高度决定了元素的边框盒。

                     就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

                     通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

二，弹性盒模型

     1，概念

           Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性

         a, 设置弹性盒（父元素添加）

             display：flex/inline-flex     属性值: flex:将对象作为弹性伸缩盒显示 

                                                                 inline-flex:将对象作为内联块级弹性伸缩盒显示

         b，主轴排列方向 （顺序指定了弹性元素在父容器中的位置）

              flex-direction   属性值：row   默认横向一行内排列

                                                      row-reverse   反向横向排列（右对齐 从后往前排

，最后一排在最前面）                  column    纵向排列

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

             c， justify-content(主轴对齐方式)（内容对齐(justify-content)属性应用在弹性容器上，控制伸缩项目在伸缩容器中的主轴(main axis）对齐方式）

                   justify-content   属性值 flex-start默认值，主轴顶端对齐

                                                          flex-end主轴末端对齐

                                                          center主轴居中对齐

                                                          space-between在主轴两端对齐，中间自动分配

                                                          space-around在主轴自动分配空白空间

                                                          space-evenly平均分配空白空间   

   d，align-items（侧轴对齐方式)（侧轴对齐方式:控制伸缩项目在伸缩容器中的侧轴对齐方式）

        align-items          属性值    flex-start:弹性盒子元素在伸缩容器里延侧轴顶端对齐。

                                                    flex-end:弹性盒子元素在伸缩容器里延侧轴未端对齐。

                                                   center:弹性盒子元素在伸缩容器里延侧轴居中对齐。

                                                   baseline:弹性盒子元素在伸缩容器里延侧轴基线对齐。

                                                    stretch:默认值。项目未设置侧轴的尺寸时拉伸成容器的侧轴尺寸。

          e，flex-wrap该属性控制伸缩容器当内容超出容器的尺寸时是否换行，同时侧轴的方向决定了新行堆叠的方向。

             flex-wrap 属性值：nowrap:不换行

                                            wrap:换行

                                            wrap-reverse:反转换行排列。

f ，align-content（行与行之间对齐方式)当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式;

    align-content  属性值： flex-start行和行在侧轴顶端对齐，没有行间距

                                            flex-end行和行在侧轴顶端对未端对齐，没有行间距

                                            center行和行在侧轴居中对齐，没有行间距

                                            space-between行和行两端对齐，中间自动分配侧轴剩余空间。

                                            space-around行和行自动分配侧轴剩余空间。

                                            stretch 默认值。行和行补强制拉伸以适应容器侧轴的长度。

                                            space-evenly平均分配空白空间

        g，align-self（加给子元素)（align-self属性规定灵活容器内被选中项目的侧轴对齐方式。

                                                       注意:align-self属性可重写灵活容器的align-items属性。）

             align-self    属性值    auto默认值。元素继承了它的父容器的align-items属性。如果没有

容器则为"stretch"。                Stretch元素被拉伸以适应容器侧轴的尺寸。

                                                Center 元素位于容器侧轴的中心。     

                                                flex-start元素位于容器的侧轴顶端。

                                                flex-end元素位于容器侧轴的末端。

            h，flex三个子属性介绍   

             flex-grow        定义项目的放大比例，默认为0，即如果存在剩余空间也不放大

             flex-shrink        定义了项目的收缩比例，默认为1，即如果空间不足该项目将缩小。负值对该属性无效。收缩量的计算方式:(元素宽度*收缩比例/元素*收比例相加)*溢出宽度

            flex-basis        项目的主轴方向的长度

           j,flex (flex-grow,flex-shrink、flex-basis)

               复合属性。设置或检索弹性盒模型对象的子元素如何分配剩余空间。缩写「flex: 1」，则其计算值为「11 %]

              缩写「flex: auto」，则其计算值为「1 1 auto]flex: none」，则其计算值为「0 0 auto]

             flex: 0 auto」或者「flex: initial」，则其计算值为「0 1 auto」，即「flex」初始值

     k，order   

          说明:控制伸缩项目的显示的顺序，数字越大越往后排，默认为0，支持负数，没有单位的整数值。

   l、flex-flow  

         flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;