Created
January 22, 2015 02:30
-
-
Save oli/3db44ce24165f11e9113 to your computer and use it in GitHub Desktop.
Does anyone transition Flexbox order yet?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Does anyone transition Flexbox order yet? | |
http://dev.w3.org/csswg/css-flexbox/#order-property */ | |
/* ✘ Chrome 28 | |
✘ Safari 6.0.3 | |
✘ Firefox 20 | |
✓ Aurora 22 | |
? IE 10 | |
*/ | |
.wrapper { | |
display: flex; | |
border: 2px solid #def; | |
transition: all 0.5s ease-out; | |
} | |
.box { | |
transition: all 0.5s ease-out; | |
width: 33%; | |
min-height: 4em; | |
padding: 0.75em 0; | |
text-align: center; | |
border: 2px solid #444; | |
background-color: #eee | |
} | |
.a { | |
order: 1; | |
background-color: #ddd; | |
} | |
.wrapper:hover .a { | |
order: 2; | |
} | |
.b { | |
order: 2; | |
background-color: #eee; | |
} | |
.wrapper:hover .b { | |
order: 3; | |
} | |
.c { | |
order: 3; | |
background-color: #fff; | |
} | |
.wrapper:hover .c { | |
order: 1; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="wrapper"> | |
<div class="box a">a</div> | |
<div class="box b">b</div> | |
<div class="box c">c</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment