CSS3弹性伸缩布局

◆旧版本写法：
●IE浏览器不支持●其他浏览器需要加前缀
display:-webkit-box;  //设置弹性伸缩盒模型
1.-webkit-box-orient  //主要实现盒子内部元素的流动方向
有四个值：horizontal (伸缩项目从左到右水平排列)默认值
      vertical(伸缩项目从上到下垂直排列)
      inline-axis(伸缩项目沿着内联轴排列显示)
      block-axis(伸缩项目沿着块轴排列显示)
2.-webkit-box-direction //设置伸缩容器中元素的流动顺序
-webkit-box-direction:reverse //逆序 默认值是normal(正常顺序)
3.-webkit-box-pack //用于伸缩项目的分布方式
有四个值：start (伸缩项目以起始点靠齐，相对于整个盒子模型来说)
      center(伸缩项目以中心点靠齐)
      end(伸缩项目以结束点靠齐)
      justify(平局分布，-webkit-支持，-moz-不支持)
4.-webkit-box-align //用来处理伸缩容器的额外空间
有五个值：start(伸缩项目以顶部为基准，去除下部额外空间)
      center(伸缩项目以中部为基准，去除上下部额外空间)
      end(伸缩项目以底部为基准，去除上部额外空间)
      baseline(伸缩项目以基线为基准，去除额外的空间)和start类似
      stretch(伸缩项目填充整个容器，默认)
5.-webkit-box-flex //分配伸缩项目的比例(可用浮点数)
-webkit-box-flex:1
6.-webkit-box-ordinal-group //可以设置伸缩项目的显示位置(可与其他元素互换位置)
p：nth-child(1){
-webkit-box-ordinal-group:2
}
p：nth-child(2){
-webkit-box-ordinal-group:1

}

◆新版本写法：兼容IE11以上和所有主流浏览器新版本 大部分不需要前缀
display:flex
1.flex-direction //设置伸缩项目的流动方向
有四个值：row(设置从左到右排列)
      row-reverse(设置从右到左排列)
  column(设置从上到下排列)
  column-reverse(设置从下到上排列)
2.flex-wrap //设置无法容纳时，自动换行
有三个值：nowrap(默认 不换行)
          wrap（自动换行）
          wrap-reverse(自动换行，方向和wrap相反)
       3.flex-flow ////direction和wrap的简写形式
          flex-flow:row wrap
       4.justify-content //设置伸缩项目的对齐方式，和旧版本的box-pack一样
        有五个值：flex-start(伸缩项目以起始点靠齐，相对于整个盒子模型来说)
          center(伸缩项目以中心点靠齐，相对于整个盒子模型来说)
          flex-end(伸缩项目以结束点靠齐，相对于整个盒子模型来说)
          space-between(平局分布)
          space-around(同上，但两端保留一半的空间)
      5.align-items //与旧版本box-align一样，处理伸缩项目容器的额外空间
        有五个值：flex-start(伸缩项目以顶部为基准，去除下部额外空间)
          flex-end(伸缩项目以底部为基准，去除上部额外空间)
          center(伸缩项目以中间为基准，去除上下部额外空间)
          baseline(伸缩项目以基线为基准，去除额外的空间)
          stretch(伸缩项目填充整个容器，默认)
     6.align-self //(单独设置某个伸缩项目的额外空间，与align-items一样)
     7.flex //用来控制伸缩容器的比例分配 与box-flex类似
     8.order //和box-ordinal-group属性一样控制伸缩项目出现的顺序

◆混合过渡写法：主要针对IE10浏览器实现伸缩布局
display:-ms-flexbox
1.-ms-flex-direction //设置伸缩项目的流动方向，与旧版本box-orient属性一样
有四个值：row(设置从左到右排列)
      row-reverse(设置从右到左排列)
  column(设置从上到下排列)
  column-reverse(设置从下到上排列)
   2.-ms-flex-wrap //设置无法容纳时，自动换行
        有三个值：nowrap(默认 不换行)
          wrap（自动换行）
          wrap-reverse(自动换行，方向和wrap相反)
   3.-ms-flex-flow //direction和wrap的简写形式
   -ms-flex-flow:row wrap
   4.-ms-flex-pack //设置对齐方式
        有四个值：start (伸缩项目以起始点靠齐，相对于整个盒子模型来说)
      center(伸缩项目以中心点靠齐)
      end(伸缩项目以结束点靠齐)
      justify(平局分布，-webkit-支持，-moz-不支持)
   5.-ms-flex-align //
a3bb
处理容器的额外空间
        有五个值：start(伸缩项目以顶部为基准，去除下部额外空间)
      center(伸缩项目以中部为基准，去除上下部额外空间)
      end(伸缩项目以底部为基准，去除上部额外空间)
      baseline(伸缩项目以基线为基准，去除额外的空间)和start类似
      stretch(伸缩项目填充整个容器，默认)
6.-ms-flex  //控制伸缩容器的分配比例
7.-ms-flex-order //控制伸缩项目出现的顺序 与box-ordinal-group一样