flex 兼容性写法

flex

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰老师详解

box

• 用于父元素的样式：

1. display: box; 该属性会将此元素及其直系子代加入弹性框模型中。（Flexbox 模型只适用于直系子代）
2. box-orient: horizontal | vertical | inherit; 该属性定义父元素的子元素是如何排列的。
3. box-pack: start | end | center | justify; 设置沿 box-orient 轴的父元素中子元素的排列方式。因此，如果 box-orient 是水平方向，则父元素的子元素是水平的排列方式，反之亦然。（表示父容器里面子容器的水平对齐方式--垂直排列时--定宽）
4. box-align: start | end | center | baseline | stretch; 基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排列，反之亦然。（表示父容器里面子容器的垂直对齐方式--水平排列时--定高）

• 用于子元素的样式：

1. box－flex: 0 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。

1.box+flexbox

  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;

2.定义子元素排列方式

  /*垂直排列*/
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -moz-box-orient:vertical;
  -moz-box-direction:normal;
  -webkit-flex-direction:column; /*flexbox下竖向排列*/
  -ms-flex-direction:column;
  flex-direction: column;

    /*换行处理*/
    -webkit-box-lines: multiple;
    -ms-box-lines:multiple ;
    -moz-box-lines:multiple; /*实验性质*/
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;

    /*对齐方式*/
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;    

-0-竖向排列box-align,flex:align-items

-0-伸缩性 box-flex

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;