Flexbox mixins.scss

@import "compass/css3/shared";

// September 2012 Candidate Recommendation (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/)
// Chrome 21 (prefixed)
// Opera 12.1 (unprefixed)
// Firefox 20 (unprefixed)
$flex-moz: false !default;
$flex-webkit: true !default;
$flex-o: false !default;
$flex-ms: false !default;
$flex-khtml: false !default;
$flex-official: true !default;

// March 2012 Working Draft (http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)
// Demo: http://umaar.github.com/css-flexbox-demo/
// More: http://www.inserthtml.com/2012/05/css3-flex-box-specification-change-layout-design/
// Internet Explorer 10 (prefixed) (http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx)
// Safari?
$flex-2012-webkit: true !default;
$flex-2012-moz: false !default;
$flex-2012-ms: true !default;

// July 2009 Working Draft (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
// Firefox <20 (prefixed)
$flex-2009-webkit: false !default;
$flex-2009-moz: true !default;

@mixin flex-standard($property, $value) {
	@include experimental($property, $value, $flex-moz, $flex-webkit, $flex-o, $flex-ms, $flex-khtml, $flex-official);
}

@mixin flex-2012($property, $value) {
	@include experimental($property, $value, $flex-2012-moz, $flex-2012-webkit, false, $flex-2012-ms, false, false);
}

@mixin flex-2009($property, $value) {
	@include experimental($property, $value, $flex-2009-moz, $flex-2009-webkit, false, false, false, false);
}

@mixin flex-standard-2012($property, $value) {
	@include experimental($property, $value,
		$flex-2012-moz or $flex-moz,
		$flex-2012-webkit or $flex-webkit,
		false, // opera
		$flex-2012-ms or $flex-ms,
		false, // khtml,
		true); // official
}

@mixin flex-draft($property, $value) {
	@include experimental(flex-direction, $value,
		$flex-2012-moz or $flex-2009-moz,
		$flex-2012-webkit or $flex-2009-webkit,
		false, // opera
		$flex-2012-ms,
		false, // khtml,
		false); // official
}

@function standard-to-draft-value($value, $version: 2009) {
	@if $value == flex-start {
		@return start;
	} @else if $value == flex-end {
		@return end;
	} @else if $value == space-between {
		@return justify;
	} @else if $value == space-around {
		@return if($version == 2009, justify, distribute);
	}
	@return $value;
}

// $type: flex | inline-flex
@mixin display-flex($type: flex) {
	@include experimental-value(display, box, $flex-2012-moz, $flex-2009-webkit, false, false, false, false);
	@include experimental-value(display, flexbox, $flex-2012-moz, $flex-2012-webkit, false, $flex-2012-ms, false, false);
	@include experimental-value(display, $type, $flex-moz, $flex-webkit, $flex-o, $flex-ms, $flex-khtml, $flex-official);
}

// -------------------------------------------------------------------------------- Flex

// $value: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
@mixin flex($value: 0 1 auto) {
	@if unitless(nth($value, 1)) { // 2009 version is not a shorthand and only expects 1 value
		@include flex-2009(box-flex, $value);
	}
	@include flex-2012(flex, $value);
	@include flex-standard(flex, $value);
}

// $value: Integer
@mixin flex-grow($value: 0) {
	@include flex-2009(box-flex, $value);
	// There is no 2012 version of this property
	@include flex-standard(flex-grow, $value);
}

// $value: Integer
@mixin flex-shrink($value: 1) {
	// There is no 2009 version of this property
	// There is no 2012 version of this property
	@include flex-standard(flex-shrink, $value);
}

// $value: united number (eg: 100px)
@mixin flex-basis($value: auto) {
	// There is no 2009 version of this property
	// There is no 2012 version of this property
	@include flex-standard(flex-basis, $value);
}

// -------------------------------------------------------------------------------- Flex-flow

// <'flex-direction'> || <'flex-wrap'>
@mixin flex-flow($value: nowrap row) {
	@if length($value) > 1 { // 2009 version doesn't have a shorthand
		@include flex-direction(nth($value, 1));
		@include flex-wrap(nth($value, 2));
	} @else {
		$first: nth($value, 1);
		@if $first == row or $first == row-reverse or $first == column or $first == column-reverse {
			@include flex-direction($value);
		} @else {
			@include flex-wrap(nth($value, 2));
		}
	}
	@include flex-standard-2012(flex-flow, $value);
}

// $value: row | row-reverse | column | column-reverse
@mixin flex-direction($value: row) {
	@include flex-direction-2009($value);
	@include flex-standard-2012(flex-direction, $value);
}

@mixin flex-direction-2009($value: row) {
	@include flex-2009(box-orient, if($value == row or $value == row-reverse, horizontal, vertical));
}

// $value: nowrap | wrap | wrap-reverse
@mixin flex-wrap($value: nowrap) {
	@include flex-wrap-2009($value);
	@include flex-standard-2012(flex-direction, $value);
}

@mixin flex-wrap-2009($value: nowrap) {
	@include flex-2009(box-lines, if($value == nowrap, single, multiple));
	@include flex-2009(box-direction, if($value == wrap-reverse, reverse, normal));
}

// -------------------------------------------------------------------------------- "Packing" & Alignment

// Distributing extra space along the "main axis"
// $value: flex-start | flex-end | center | space-between | space-around
@mixin justify-content($value: flex-start) {
	@include flex-2009(box-pack, standard-to-draft-value($value, 2009));
	@include flex-2012(flex-pack, standard-to-draft-value($value, 2012));
	@include flex-standard(justify-content, $value);
}

// Distributing extra space along the "cross axis"
// $value: flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($value: flex-start) {
	@include flex-2009(box-align, standard-to-draft-value($value, 2009));
	@include flex-2012(flex-line-pack, standard-to-draft-value($value, 2012));
	@include flex-standard(align-content, $value);
}

// Align items along the "cross axis"
// $value: flex-start | flex-end | center | baseline | stretch
@mixin align-items($value: stretch) { // the flex container
	// There is no 2009 version of this property
	@include flex-2012(flex-align, standard-to-draft-value($value, 2012));
	@include flex-standard(align-items, $value);
}

// -------------------------------------------------------------------------------- Child properties

// Align items along the "cross axis" -- overrides `align-items` value on individual items
// $value: auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($value: auto) { // children of flex containers
	// There is no 2009 version of this property
	@include flex-2012(flex-item-align, standard-to-draft-value($value, 2012));
	@include flex-standard(align-self, $value);
}

// $value: Integer
@mixin order($value: 0) {
	@include flex-draft(flex-order, $value);
	@include flex-standard(order, $value);
}

Can you give me an example that how you use this? please

@cipoleto I don't recommend using it at all. This is 10 years out of date, and Compass has been unmaintained for years. At this point, you should use Flexbox as specified in CSS, and you don't need specialized mixins to support long-outdated experimental syntax.