Created
May 4, 2013 14:30
-
-
Save oli/5517669 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