Adapt android 2.1+ WebView, thanks https://github.com/stevenbenisek/compass-flexbox

android-flex.css

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

.flex.flex--reverse {
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-moz-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.flex--row {
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}

.flex--row.flex--reverse {
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-direction: reverse;
	-moz-box-direction: reverse;
	-webkit-flex-direction: column-reverse;
	-ms-flex-direction: column-reverse;
	flex-direction: column-reverse;
}

.flex--justify-content--space-between {
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.flex--justify-content--space-around {
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: distribute;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

.flex--justify-content--center {
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.flex--justify-content--start {
	-webkit-box-pack: start;
	-moz-box-pack: start;
	-ms-flex-pack: start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}

.flex--justify-content--end {
	-webkit-box-pack: end;
	-moz-box-pack: end;
	-ms-flex-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

.flex--align-items--start {
	-webkit-box-align: start;
	-moz-box-align: start;
	-ms-flex-align: start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}

.flex--align-items--end {
	-webkit-box-align: end;
	-moz-box-align: end;
	-ms-flex-align: end;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}

.flex--align-items--center {
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.flex--align-items--baseline {
	-webkit-box-align: baseline;
	-moz-box-align: baseline;
	-ms-flex-align: baseline;
	-webkit-align-items: baseline;
	align-items: baseline;
}

.flex--align-items--stretch {
	-webkit-box-align: stretch;
	-moz-box-align: stretch;
	-ms-flex-align: stretch;
	-webkit-align-items: stretch;
	align-items: stretch;
}

/*.flex--flex-order {
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2
}*/
.flex--flex-grow-all > * {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex-grow: 1;
	-ms-flex-grow: 1;
	flex-grow: 1
}
.flex--flex-grow-last :last-child {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex-grow: 1;
	-ms-flex-grow: 1;
	flex-grow: 1
}

.flex--flex-grow-middle :nth-child(2) {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex-grow: 1;
	-ms-flex-grow: 1;
	flex-grow: 1
}

.flex-center-wrapper {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

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

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

good

为什么不用 autoprefixer