CSS3 弹性盒

一、怪异盒模型

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

 content-box(按标准盒模型的规则解析)
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。

 border-box(按怪异盒模型的规则解析)

二、弹性盒模型

 1、display:flex/inline-flex
说明：flex： 将对象作为弹性伸缩盒显示           inline-flex：将对象作为内联块级弹性伸缩盒显示 设置为弹性盒（父元素添加）

2、flex-direction (主轴排列方向) 

说明：    顺序指定了弹性子元素在父容器中的位置
　　　　  row  默认横向一行内排列
              row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
              column：纵向排列。
              column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
2、flex-direction (主轴排列方向) 

说明：    顺序指定了弹性子元素在父容器中的位置
　　　　  row  默认横向一行内排列
              row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
              column：纵向排列。
              column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
3、justify-content(主轴对齐方式)

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

         ■ flex-start默认值，主轴顶端对齐
         ■ flex-end主轴末端对齐
         ■ center主轴居中对齐
         ■ space-between在主轴两端对齐，中间自动分配
         ■ space-around在主轴自动分配空白空间
         ■ space-evenly平均分配空白空间

4、align-items（侧轴对齐方式）

说明：
    侧轴对齐方式：控制伸缩项目在伸缩容器中的侧轴对齐方式
    flex-start：弹性盒子元素在伸缩容器里延侧轴顶端对齐。
    flex-end：弹性盒子元素在伸缩容器里延侧轴末端对齐。
    center：弹性盒子元素在伸缩容器里延侧轴居中对齐。
    baseline：弹性盒子元素在伸缩容器里延侧轴基线对齐。
           stretch：默认值。项目未设置侧轴的尺寸时拉伸成容器的侧轴尺寸。
    
 5、flex-wrap
说明：
该属性控制伸缩容器当内容超出容器的尺寸时是否换行，同时侧轴的方向决定了新行堆叠的方向。
nowrap：不换行
wrap：换行
wrap-reverse：反转换行排列。
 6、align-content（行与行之间对齐方式）
说明：
当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式；
          ■ flex-start行和行在侧轴顶端对齐，没有行间距
          ■ flex-end行和行在侧轴顶端对末端对齐，没有行间距
          ■ center行和行在侧轴居中对齐，没有行间距
          ■ space-between行和行两端对齐，中间自动分配侧轴剩余空间。
          ■ space-around行和行自动分配侧轴剩余空间。
          ■  stretch  默认值。行和行补强制拉伸以适应容器侧轴的长度。
          ■ space-evenly平均分配空白空间
 7、align-self（加给子元素）

说明：
align-self 属性规定灵活容器内被选中项目的侧轴对齐方式。
注意：align-self 属性可重写灵活容器的 align-items 属性。

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

为 "stretch"。
Stretch    元素被拉伸以适应容器侧轴的尺寸。
Center    元素位于容器侧轴的中心。
flex-start   元素位于容器的侧轴顶端。
flex-end        元素位于容器侧轴的末端。
8、flex三个子属性介绍

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

flex-shrink
定义了项目的收缩比例，默认为1，即如果空间不足该项目将缩小。负值对该属性无效。
收缩量的计算方式：（元素宽度*收缩比例/元素*收比例    相加）*溢出宽度
flex-basis
项目的主轴方向的长度
 9、flex（flex-grow，flex-shrink、flex-basis）

说明：
复合属性。设置或检索弹性盒模型对象的子元素如何分配剩余空间。
缩写「flex: 1」, 则其计算值为「1   1   %」
缩写「flex: auto」, 则其计算值为「1   1   auto」
flex: none」, 则其计算值为「0   0  auto」
flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

10、order

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

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