Skip to content

Instantly share code, notes, and snippets.

@Farmatique
Last active April 8, 2023 08:55
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Farmatique/d88491ca4a8c75f3b39df6c71852bf5a to your computer and use it in GitHub Desktop.
Save Farmatique/d88491ca4a8c75f3b39df6c71852bf5a to your computer and use it in GitHub Desktop.
Flex properties with prefixes
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: -webkit-box;
display: -ms-flexbox; /* ie 10 */
display:-webkit-flex;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
-webkit-box-align: center;
-ms-flex-align:center; /* ie 10 */
align-items: center;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
-webkit-box-pack: space-between;
-ms-flex-pack: justify; /* ie 10 */
justify-content: space-between;
-webkit-align-self: flex-start;
-moz-align-self: flex-start;
-ms-align-self: flex-start;
-o-align-self: flex-start;
align-self: flex-start;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
-webkit-box-orient: vertical; /*ie10*/
flex-direction: column;
-webkit-box-direction: normal | reverse;
-webkit-flex-basis: 80px; /* Safari 6.1+ */
flex-basis: 80px;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-order: 1;
order: 1;
/* old safari issues */
.wrapper{
display: -webkit-box;
-webkit-box-direction: normal;
-webkit-box-align: center; /* align-items */
-webkit-box-pack: center; /* justify-content */
-webkit-box-orient: vertical;
}
.elements-inside-wrapper{
-webkit-flex: 1;
flex: 1;
-webkit-box-flex: 1;
-webkit-order: 1;
-webkit-box-ordinal-group: 1;
order: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment