Skip to content

Instantly share code, notes, and snippets.

@HeGanjie
Last active November 2, 2021 14:07
  • Star 21 You must be signed in to star a gist
  • Fork 17 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save HeGanjie/0289b5b16e2ee4b16030 to your computer and use it in GitHub Desktop.
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;
}
@proYang
Copy link

proYang commented Jul 27, 2016

Good

@yu-h
Copy link

yu-h commented Jul 27, 2016

good

@dd1994
Copy link

dd1994 commented Aug 29, 2016

为什么不用 autoprefixer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment