css弹性盒子新旧兼容

前言：本篇随笔是对弹性盒子有了解的人来写的这篇文章，具体属性产生的效果这里不做说明，基础的东西去查文档。这里只是总结。

时至今日，css3的flex弹性盒子在移动端基本上都是支持的，但不排除有些些低版本的设备（Android4.4以下，只能兼容旧版的flexbox布局），还有个别的国产设备并不支持flex那么就需要用到旧版的flex-box。

在移动端布局呢，我们最常用的无非这么几种情况
1、垂直居中

2,、平分

3、分配剩余区域

那么我们需要用到新旧盒子的哪些属性呢？请看下面

一、开启弹性盒子

新：flex

display:flex

旧：display:flex-box

二、主轴的排列对齐方式

新：justify-content: flex-start | flex-end | center | space-between | space-around;

旧：box-pack: start | end | center | justify;

三、侧轴的排列对齐方式

新：align-items: flex-start | flex-end | center | baseline | stretch;

旧：box-align:box-align: start | end | center | baseline | stretch;

这里要重点提一下stertch:让子元素在侧轴方向拉伸占满盒子。

四、分配剩余空间

新：flex:

旧：box-flex

五、定义主轴（默认是x轴），还有排列的方向（默认是从左向右）

新：flex-direction: row | row-reverse | column | column-reverse;

旧：

box-direction: normal | reverse | inherit;

box-orient: horizontal | vertical | inline-axis（等同于horizontal） | block-axis(等同于vertical) |inherit;

说明：旧的用两个属性分别来控制主轴和排列方向，新的只用一个。

其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。

七、在移动端我们需要加上 -webkit-前缀