弹性布局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

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