Skip to content

Instantly share code, notes, and snippets.

@jdelia
Created Jan 19, 2016
Embed
What would you like to do?
/* Support for current and last browser version using grunt-postcss autoprefixer */
/* FlexBox
---------------------------------------------------------------------------------------------------- */
.test {
display: flex;
height: 500px;
padding: 15px;
margin: 24px;
border: 1px #333 solid;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: row;
}
.test-item {
padding: 15px;
margin: 10px;
background: tomato;
color: #fff;
width: 200px;
}
.test-item-1 {
flex-grow: 1;
}
.test-item-2 {
order: -1;
flex-grow: 2;
}
/* Here is the same code with autoprefixing for the last two browser versions */
/* FlexBox
---------------------------------------------------------------------------------------------------- */
.test {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 500px;
padding: 15px;
margin: 24px;
border: 1px #333 solid;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.test-item {
padding: 15px;
margin: 10px;
background: tomato;
color: #fff;
width: 200px;
}
.test-item-1 {
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.test-item-2 {
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
-webkit-flex-grow: 2;
-ms-flex-positive: 2;
flex-grow: 2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment