display flex property

1Display: flex 
2Flex-direction: row | row-reverse | column | column-reverse
3align-self: flex-start | flex-end | center | baseline | stretch
4justify-content: start |  center | space-between | space-around | space-evenly

1/* Flex */
2.anyclass {
3	display:flex;
4}
5/* row is the Default, if you want to change choose */
6.anyclass {
7	display:flex;
8 	flex-direction: row | row-reverse | column | column-reverse;
9}
10
11.anyclass {
12  /* Alignment along the main axis */
13  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
14}

1.class {
2  display: flex;
3}
4
5/* use display: flex to turn CSS element into a flexbox */

1flex: none                                            /* value 'none' case */
2flex: <'flex-grow'>                                   /* One value syntax, variation 1 */
3flex: <'flex-basis'>                                  /* One value syntax, variation 2 */
4flex: <'flex-grow'> <'flex-basis'>                    /* Two values syntax, variation 1 */
5flex: <'flex-grow'> <'flex-shrink'>                   /* Two values syntax, variation 2 */
6flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>    /* Three values syntax */
7flex: inherit

1@mixin flexbox() {
2  display: -webkit-box;
3  display: -moz-box;
4  display: -ms-flexbox;
5  display: -webkit-flex;
6  display: flex;
7}
8
9@mixin flex($values) {
10  -webkit-box-flex: $values;
11  -moz-box-flex:  $values;
12  -webkit-flex:  $values;
13  -ms-flex:  $values;
14  flex:  $values;
15}
16
17@mixin order($val) {
18  -webkit-box-ordinal-group: $val;  
19  -moz-box-ordinal-group: $val;     
20  -ms-flex-order: $val;     
21  -webkit-order: $val;  
22  order: $val;
23}
24
25.wrapper {
26  @include flexbox();
27}
28
29.item {
30  @include flex(1 200px);
31  @include order(2);
32}

1The flex property is a shorthand property for:
2
3flex-grow
4flex-shrink
5flex-basis