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

flex

/* display:flex; */
.flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
/* for Android 4.3- */
.flex > * {display: block;}
/* row reverse */
.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; }
/* column */
.flex--clo { -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; }
/* column reverse*/
.flex--col.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; }
/* E 加在父元素上 */

/* S 一些固定写法 */
/* 盒子中所有元素 flex:1 */
.flex--flex-grow-all > * { min-width:0; -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; }
/* E 一些固定写法 */

赞

为什么不能用@ 回复你

好东西

点赞

赞！