Skip to content

Instantly share code, notes, and snippets.

@joseph-turner
Created May 29, 2013 22:21
  • Star 12 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save joseph-turner/5674311 to your computer and use it in GitHub Desktop.
Flexbox SASS mixin (Compass required) Implementation based on Chris Coyier's article: Using Flexbox: Mixing Old and New for the Best Browser Support (http://css-tricks.com/using-flexbox/)
// ==================================================================
// Flexbox
//
// Implementation based on Chris Coyier's article:
// Using Flexbox: Mixing Old and New for the Best Browser Support || http://css-tricks.com/using-flexbox/
// ==================================================================
// Flexbox Context (applied to container element of flex items)
@mixin flex-display {
@include experimental-value(display, box, -moz, -webkit, not -o, -ms, not -khtml, official); // Old
@include experimental-value(display, flex, -moz, -webkit, not -o, -ms, not -khtml, official);
}
// Controlling widths
@mixin flex($flex, $flex-width: false) {
@include experimental(box-flex, $flex, -moz, -webkit, not -o, not -ms, not -khtml, not official);
@if $flex-width {
width: $flex-width;
}
@include experimental(flex, $flex, not -moz, -webkit, not -o, -ms, not -khtml, official);
}
// Re-Ordering
@mixin flex-order($order) {
@include experimental(box-ordinal-group, $order, -moz, -webkit, not -o, not -ms, not -khtml, not official);
@include experimental(flex-order, $order, not -moz, not -webkit, not -o, -ms, not -khtml, not official);
@include experimental(order, $order, not -moz, -webkit, not -o, not -ms, not -khtml, not official);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment