Skip to content

Instantly share code, notes, and snippets.

@Paul-frc
Last active October 1, 2021 09:07
Show Gist options
  • Save Paul-frc/3ed765ed10c9635384e98f58334081e4 to your computer and use it in GitHub Desktop.
Save Paul-frc/3ed765ed10c9635384e98f58334081e4 to your computer and use it in GitHub Desktop.
the flexbox equiv. for IE10
/* ==================== */
/* container attributes */
/* ==================== */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row | column | row-reverse | column-reverse;
-webkit-flex-direction: row | column | row-reverse | column-reverse;
flex-direction: row | column | row-reverse | column-reverse;
-ms-flex-align: start | end | center | stretch | baseline;
-webkit-align-items: flex-start | flex-end | center | stretch | baseline;
align-items: flex-start | flex-end | center | stretch | baseline;
-ms-flex-line-pack: start | end | center | distribute | justify | stretch;
-webkit-align-content: flex-start | flex-end | center | space-around | space-between | stretch;
align-content: flex-start | flex-end | center | space-around | space-between | stretch;
-ms-flex-pack: start | end | center | distribute | justify;
-webkit-justify-content: flex-start | flex-end | center | space-around | space-between;
justify-content: flex-start | flex-end | center | space-around | space-between;
-ms-flex-wrap: none | wrap;
-webkit-flex-wrap: nowrap | wrap | wrap-reverse
flex-wrap: nowrap | wrap | wrap-reverse
/* ================ */
/* child attributes */
/* ================ */
-ms-flex-positive: 0;
-webkit-flex-grow: 0;
flex-grow: 0;
-ms-flex-negative: 1;
-webkit-flex-shrink: 1;
flex-shrink: 1;
-ms-flex-preferred-size: auto;
-webkit-flex-basis: auto;
flex-basis: auto;
/* use shorthand whenever possible since ie10 uses different defaults */
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-ms-flex-item-align: start | end | center | stretch | baseline;
-webkit-align-self: flex-start | flex-end | center | stretch | baseline;
align-self: flex-start | flex-end | center | stretch | baseline;
-ms-flex-order: 1 | 2 | 3;
-webkit-flex-order: 1 | 2 | 3;
flex-order: 1 | 2 | 3;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment