flex布局

标签：

flex：定义布局为盒模型
flex-v：盒模型垂直布局
flex-1：子元素占据剩余的空间
flex-align-center：子元素垂直居中
flex-pack-center：子元素水平居中
flex-pack-justify：子元素两端对齐
兼容性：ios 4+、android 2.3+、winphone8+
*/

.flex{

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

}

.flex-v{

　　-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;

}

.flex-1{

　　-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;

}

.flex-align-center{

　　-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;

}

.flex-pack-center{

　　-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;

}

.flex-pack-justify{

　　-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;

}

只要在元素的父标签里写上这些样式代码，就会实现效果，子元素可以垂直，水平居中，代码变得轻量，在布局系统中也可以使用。

flex布局

标签：

原文地址：http://www.cnblogs.com/well-nice/p/4726525.html