CSS之弹性分布

/*弹性分布*/
//水平排列
.dis_flex{display: flex; display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: center;}/*垂直居中，水平居中*/

.dis_tflex{display: flex;display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: flex-start; justify-content: center;}/*垂直居上、水平居中*/

.dis_jflex{display: flex;display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content:space-between;}/*垂直居中、两端分布*/

.dis_jtflex{display: flex;display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: flex-start; justify-content:space-between;}/*垂直居上、两端分布*/

.dis_zflex{display: flex; display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content:left;}
//垂直排列
.dis_flex2{display: flex;display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; flex-direction: column;align-items: center; justify-content: center;}

.dis_tflex2{display: flex; display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; flex-direction: column;align-items: center;justify-content:flex-start;}

.dis_zflex2{display: flex; display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; flex-direction: column;}

参考网址！！！
CSS3以及小程序切图必备！！