怪异盒子模型和弹性盒子模型的属性及语法

怪异盒模型
 box-sizing用来设置盒模型的解析规则的
content-box(按标准盒模型的规则解析)
border-box(按怪异盒模型的规则解析)
弹性盒模型
display:flex/inline-flex
说明：flex： 将对象作为弹性伸缩盒显示
          inline-flex：将对象作为内联块级弹性伸缩盒显示
设置为弹性盒（父元素添加）
---------------------------------------------------------------------------------------------

父元素添加

justify-content(主轴对齐方式)
属性值：
flex-start默认值，主轴顶端对齐
 flex-end主轴末端对齐
center主轴居中对齐
 space-between在主轴两端对齐，中间自动分配
 space-around在主轴自动分配空白空间
 space-evenly平均分配空白空间
----------------------------------------------------------------------------------------------
align-items（侧轴对齐方式）：控制伸缩项目在伸缩容器中的侧轴对齐方式
flex-start：弹性盒子元素在伸缩容器里延侧轴 顶端  对齐。
flex-end：弹性盒子元素在伸缩容器里延侧轴  末端  对齐。
center：弹性盒子元素在伸缩容器里延侧轴     居中  对齐。
baseline：弹性盒子元素在伸缩容器里延侧轴  基线  对齐。
stretch：默认值。项目未设置侧轴的尺寸时拉伸成容器的侧轴尺寸。
----------------------------------------------------------------------------------------------
弹性盒子水平垂直居中：justify-content：center；align-items：center
               或者给子元素加 align-self：center；
------------------------------------------------------------------------------------------------
flex-wrap（控制伸缩容器当内容超出容器的尺寸时是否换行）
属性值：？
nowrap：不换行
wrap：换行
wrap-reverse：反转换行排列。
------------------------------------------------------------------------------------------
align-content（行与行之间对齐方式）
说明：当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式；
属性值：
flex-start行和行在侧轴顶端对齐，没有行间距 
flex-end行和行在侧轴顶端对末端对齐，没有行间距
center行和行在侧轴居中对齐，没有行间距
space-between行和行两端对齐，中间自动分配侧轴剩余空间。
space-around行和行自动分配侧轴剩余空间。
 stretch  默认值。行和行补强制拉伸以适应容器侧轴的长度。
space-evenly平均分配空白空间
------------------------------------------------------------------------------------------
align-self（加给子元素）
align-self 属性规定灵活容器内被选中项目的侧轴对齐方式。
注意：align-self 属性可重写灵活容器的 align-items 属性。
属性值：
auto     默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则        为 "stretch"。
Stretch    元素被拉伸以适应容器侧轴的尺寸。
Center    元素位于容器侧轴的中心。
flex-start   元素位于容器的侧轴顶端。
flex-end        元素位于容器侧轴的末端。
---------------------------------------------------------------------------------------------------
flex属性  
属性值：（flex-grow，flex-shrink、flex-basis）
flex-grow
定义项目的放大比例，默认为0，即如果存在剩余空间也不放大
flex-shrink
定义了项目的收缩比例，默认为1，即如果空间不足该项目将缩小。负值对该属性无效。
收缩量的计算方式：（元素宽度*收缩比例/元素*收比例    相加）*溢出宽度
flex-basis
项目的主轴方向的长度
-----------------------------------------------------------------------------------------------------
order
控制伸缩项目的显示的顺序，数字越大越往后排，默认为0，支持负数，没有单位的整数值。
flex-flow 
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;