话不多说,上代码,关键在对应的低版本安卓的微信浏览器,需要-webkit-box对应的-webkit-box-orient -webkit-box-pack等的设置。
.flex{ /* 设置弹性布局 */ display:-webkit-box;/* android 2.1-3.0, ios 3.2-4.3 */ display:-webkit-flex;/* Chrome 21+ */ display:-ms-flexbox;/* WP IE 10 */ display:flex;/* android 4.4 */ } .flex-direction-column{ /* 设置弹性布局的方向,子元素按照在源文档中声明的顺序从上到下显示 */ -webkit-box-orient: vertical;/* android 2.1-3.0, ios 3.2-4.3 */ -webkit-flex-direction: column;/* Chrome 21+ */ -ms-flex-direction: column;/* WP IE 10 */ flex-direction: column;/* android 4.4 */ } .flex-1{ /* 子元素自动占据剩余的空间 */ -webkit-box-flex:1;/* android 2.1-3.0, ios 3.2-4.3 */ -webkit-flex:1;/* Chrome 21+ */ -ms-flex:1;/* WP IE 10 */ flex:1;/* android 4.4 */ } .flex-pack-center{ /* 水平布局下的子元素 水平居中 */ -webkit-box-pack: center;/* android 2.1-3.0, ios 3.2-4.3 */ -webkit-justify-content: center;/* Chrome 21+ */ -ms-flex-pack: center;/* WP IE 10 */ justify-content: center;/* android 4.4 */ } .flex-align-center{ /* 水平布局下的子元素 垂直居中 */ -webkit-box-align: center;/* android 2.1-3.0, ios 3.2-4.3 */ -webkit-align-items: center;/* Chrome 21+ */ -ms-flex-align: center;/* WP IE 10 */ align-items: center;/* android 4.4 */ } .flex-pack-justify{ /* 水平布局下的子元素 2端对齐 */ -webkit-box-pack: justify;/* android 2.1-3.0, ios 3.2-4.3 */ -webkit-justify-content: space-between;/* Chrome 21+ */ -ms-flex-pack: justify;/* WP IE 10 */ justify-content: space-between;/* android 4.4 */ }