display:                   box;
display:            inline-box;
box-align:             stretch; /* start | end | center | baseline | stretch */
box-direction:          normal; /* normal | reverse | inherit */
box-flex:                  0.0; /* <number> */
box-flex-group:              1; /* <integer> */
box-lines:              single; /* single | multiple */
box-ordinal-group:           1; /* <integer> */
box-orient:        inline-axis; /* horizontal | vertical | inline-axis | block-axis | inherit */
box-pack:                start; /* start | end | center | justify */

display:               flexbox;
display:        inline-flexbox;
flex-align:            stretch; /* start | end | center | baseline | stretch */
flex-flow:                 row; /* [ row | row-reverse | column | column-reverse ] [ wrap | wrap-reverse ]? */
flex-line-pack:          start; /* start | end | center | justify */
flex-order:                  0; /* <number> */
flex-pack:               start; /* start | end | center | justify */

/* Flex Function
 *   flex( [ <pos-flex> <neg-flex>? ]? || <preferred-size>? )
 */

display:               flex;
display:        inline-flex;
align-content:      stretch; /* flex-start | flex-end | center | space-between | space-around | stretch */
align-items:        stretch; /* flex-start | flex-end | center | baseline | stretch */
align-self:            auto; /* auto | flex-start | flex-end | center | baseline | stretch */
flex:              0 1 auto; /* none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] */
flex-basis:            auto; /* <width> */
flex-direction:         row; /* row | row-reverse | column | column-reverse */
flex-flow:       row nowrap; /* <flex-direction> || <flex-wrap> */
flex-grow:                0; /* <number> */
flex-shrink:              0; /* <number> */
flex-wrap:           nowrap; /* nowrap | wrap | wrap-reverse */
justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around */
order:                    0; /* <integer> */

display:  -webkit-box;
display:     -moz-box;
display:          box;

/* Bourbon */
@include display-box;

/* Compass */
@include display-box;

display: inline-box;

display: -ms-flexbox;

display: -ms-inline-flexbox;

display: -webkit-flex;
display:    -moz-flex;
display:         flex;

/* Bourbon: New Flex Box */
@include display(flex);

/* Nib */
display flex

/* Less Hat */
.display(flex);

display: -webkit-inline-flex;
display:    -moz-inline-flex;
display:         inline-flex;

/* Bourbon: New Flex Box */
@include display(inline-flex);

/* Nib */
display inline-flex

/* Less Hat */
.display(inline-flex);

-webkit-box-flex: <number>;
   -moz-box-flex: <number>;
        box-flex: <number>;

/* Bourbon */
@include box-flex(<number>);

/* Compass */
$default-box-flex: 0;
@include box-flex(<number>);

-webkit-flex: [ none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] ];
   -moz-flex: [ none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] ];
        flex: [ none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] ];

/* Bourbon: New Flex Box */
@include flex( [ none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] ] );

/* Nib */
flex [ none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] ]

/* Less Hat */
.flex( [ none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] ] )

-webkit-box-ordinal-group: <integer>;
   -moz-box-ordinal-group: <integer>;
        box-ordinal-group: <integer>;

/* Bourbon */
@include ordinal-group(<integer>);

/* Compass */
$default-box-ordinal-group: 1;
@include box-ordinal-group(<integer>);

-webkit-order: <integer>;
   -moz-order: <integer>;
        order: <integer>;

/* Bourbon: New Flex Box */
@include order(<integer>);

/* Nib */
order <integer>

/* Less Hat */
.order(<integer>);

-webkit-box-orient: [ horizontal | vertical | inline-axis | block-axis | inherit ];
   -moz-box-orient: [ horizontal | vertical | inline-axis | block-axis | inherit ];
        box-orient: [ horizontal | vertical | inline-axis | block-axis | inherit ];

/* Bourbon */
@include box-orient([ horizontal | vertical | inline-axis | block-axis | inherit ]);

/* Compass */
$default-box-orient: horizontal;
@include box-orient([ horizontal | vertical | inline-axis | block-axis | inherit ]);

-webkit-box-pack: [ start | end | center | justify ];
   -moz-box-pack: [ start | end | center | justify ];
        box-pack: [ start | end | center | justify ];

/* Bourbon */
@include box-pack([ start | end | center | justify ]);

/* Compass */
$default-box-pack: start;
@include box-direction([ start | end | center | justify ]);

-webkit-box-align: [start | end | center | baseline | stretch];
   -moz-box-align: [start | end | center | baseline | stretch];
        box-align: [start | end | center | baseline | stretch];

/* Bourbon */
@include box-align([ start | end | center | justify ]);

/* Compass */
$default-box-align: stretch;
@include box-align([ start | end | center | justify ]);

-webkit-align-self: [ auto | flex-start | flex-end | center | baseline | stretch ];
   -moz-align-self: [ auto | flex-start | flex-end | center | baseline | stretch ];
        align-self: [ auto | flex-start | flex-end | center | baseline | stretch ];

/* Bourbon: New Flex Box */
@include align-self([ auto | flex-start | flex-end | center | baseline | stretch ]);

/* Nib */
align-self [ auto | flex-start | flex-end | center | baseline | stretch ]

/* Less Hat */
.align-self([ auto | flex-start | flex-end | center | baseline | stretch ]);

-webkit-box-direction: [ normal | reverse | inherit ];
   -moz-box-direction: [ normal | reverse | inherit ];
        box-direction: [ normal | reverse | inherit ];

/* Bourbon */
@include box-direction([ normal | reverse | inherit ]);

/* Compass */
$default-box-direction: normal;
@include box-direction([ normal | reverse | inherit ]);

-webkit-flex-direction: [ row | row-reverse | column | column-reverse ];
   -moz-flex-direction: [ row | row-reverse | column | column-reverse ];
        flex-direction: [ row | row-reverse | column | column-reverse ];

/* Bourbon: New Flex Box */
@include flex-direction($value: row);

/* Nib */
flex-direction [ row | row-reverse | column | column-reverse ]

/* Less Hat */
.flex-direction([ row | row-reverse | column | column-reverse ]);

-webkit-align-content: [ flex-start | flex-end | center | space-between | space-around | stretch ];
   -moz-align-content: [ flex-start | flex-end | center | space-between | space-around | stretch ];
        align-content: [ flex-start | flex-end | center | space-between | space-around | stretch ];

/* Bourbon: New Flex Box */
@include align-content([ flex-start | flex-end | center | space-between | space-around | stretch ]);

/* Nib */
align-content [ flex-start | flex-end | center | space-between | space-around | stretch ]

/* Less Hat */
.align-content([ flex-start | flex-end | center | space-between | space-around | stretch ])

-webkit-justify-content: [ flex-start | flex-end | center | space-between | space-around ];
   -moz-justify-content: [ flex-start | flex-end | center | space-between | space-around ];
        justify-content: [ flex-start | flex-end | center | space-between | space-around ];

/* Bourbon: New Flex Box */
@include justify-content([ flex-start | flex-end | center | space-between | space-around ]);

/* Nib */
justify-content [ flex-start | flex-end | center | space-between | space-around ]

/* Less Hat */
.justify-content([ flex-start | flex-end | center | space-between | space-around ]);