Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adapt android 2.1+ WebView, thanks https://github.com/stevenbenisek/compass-flexbox
.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;
}
@darcyWang

This comment has been minimized.

Copy link

commented Jun 23, 2016

Wo, It's cool

@proYang

This comment has been minimized.

Copy link

commented Jul 27, 2016

Good

@yu-h

This comment has been minimized.

Copy link

commented Jul 27, 2016

good

@dd1994

This comment has been minimized.

Copy link

commented Aug 29, 2016

为什么不用 autoprefixer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.