弹性布局flex

由于兼容性问题，flex布局目前为止，本人基本还只是使用在移动端。使用过它的攻城狮都是对它爱不释手，现在对于没有使用过的人简单讲解下：
布局的传统解决方案，基于盒状模型，大多使用 position定位布局 + float浮动布局。当然，这些都可以解决我们的问题，但是，在有些情况下却不是最简单的方式，例如，如微信下的导航栏，使用flex布局在效率上无疑快很多；

1.任何一个容器都可以指定为 Flex 布局

.box{ 
  display: -webkit-flex; //Webkit 内核的浏览器，必须加上-webkit前缀。
  display: flex;
}

注意点：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

下面是一个平分的例子：

<!--html代码片段  -->
<div class="flex-p">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
 </div>

 /* css代码片段 */
 .flex-p {
     height: 200px;
     border: 1px solid red;

     /*新版弹性盒模型*/
     display: flex;
     display: -webkit-flex;
 }

 .flex-p div {
     width: 50px;
     height: 50px;
     background-color: darkcyan;
     color: #fff;

     margin: auto;
 }

效果如下

当然，这是默认水平排列，如果我们想垂直排列（方向）就需要用到 flex-direction属性了，这个属性的值有：row:水平 ，column：垂直 以及 排列顺序 row-reverse:水平方向,从右往左,元素反序 column-reverse:垂直方向,从下往上,元素反序 几个值

有时候需求并不是要求平均分配，可能左右俩个靠边均分等情况，该如何处理？这就需要用到flex的富裕空间的分配，属性justify-content，值如下

/元素在主轴的开始位置/结束位置,富裕空间在主轴的结束位置/开始位置/
justify-content: flex-start;
justify-content: flex-end;

元素在主轴中间,富裕空间在主轴的俩侧
justify-content: center;

/*富裕空间平均分配在每俩个元素之间*/
justify-content: space-between;

/*富裕空间平均分配*/
 justify-content: space-around;

//垂直方向上
 align-items: flex-start; //上边缘
 align-items: flex-end; //下边缘
 align-items: center;  //居中
 align-items: baseline;//根据文字的基线对齐

相对于子元素，主要有比例占位，如

.flex-p div:nth-of-type(1) {
    flex:1;
    -webkit-flex:1;
}
.flex-p div:nth-of-type(2){
    flex:1;
    -webkit-flex:1;
}
.flex-p div:nth-of-type(4){
    flex:1;
    -webkit-flex:1;
}
.flex-p div:nth-of-type(4){
    flex:1;
    -webkit-flex:1;
}

这是把父元素分为1+1+1+1=4份，每个子元素占一份，如果你想第一个元素占父元素的一半，就可以

.flex-p div:nth-of-type(1) {
    flex:3;
    -webkit-flex:1;
}

具体demo链接如下：
http://images-lm.oss-cn-hangzhou.aliyuncs.com/flex-demo.zip

如有不足或错误的地方，望交流指正