css flex布局

　　

flex是css3新出的一种布局

设置display:flex后，子元素的float/vertical-align属性均会失效。

父盒子简称为容器，子元素简称为项目，以下：

容器属性：

1.flex-direction 展现方向

    row/column/row-reverse/column-reverse

2.flex-wrap 是否折行

   wrap/nowrap/wrap-reverse

3.flex-flow 1和2的统称 

   默认是row nowrap

4.justify-content 水平方向排列

   flex-start/flex-end/center/space-between/space-around

5.align-items 垂直方向排列

  flex-start/flex-end/center/strech/baseline

  注意：当flex-direction设置从row变成column  ,  jusitify-content和align-items的设置会反过来

项目属性

1.order 定义项目的顺序

  默认是0

2.flex-grow 定义项目的放大比例

  默认是0

3.flex-shrink 定义项目的缩小比例

  默认是1

4.flex-basis 定义在分配多余空间时，项目所占空间

  默认是auto

5.flex:2/3/4的统称

  默认是0 1 auto

6.align-self 允许单个项目与其他项目不一样的对齐方式

  可覆盖align-items

  auto/flex-start/flex-end/center/baseline/stretch

兼容性写法

dispaly:flex

【

　　display:-webkit-box;

      display:-webkit-flex;

      display:-ms-flexbox

  】

flex-direction:column

【

　　-webkit-box-orient:vertical;

　　-webkit-flex-direction:colume;

　　-ms-flex-direction:column

  】

flex:1

【

　　-webkit-box-flex:1;

　　-webkit-flex:1;

　　-ms-flex:1

 】

align-items:center

【

　　-webkit-box-align:center;

　　-weblit-align-items:center;

　　-ms-flex-align:center

  】

justify-content:center

【

　　-webkit-box-pack:center;

　　-webkit-justify-content:center;

　　-ms-flex-pack:center

  】

justify-content:space-between

【

　　-webkit-box-pack:justify;

　　-webkit-justify-conent:space-between;

　　-ms-flex-pack:justify

  】