// display-flex:
container:
flex-flow:flex-direction || flex-wrap'
justify-content // main axis place method - 5 values : flex-start|flex-end|center|space-between|space-around
align-items // cross axis place method(all ele as one row) - 6 values : stretch(default) | flex-start | flex-end | center | space-between | space-around
align-content //corss axis line place methos(per axis line as one row) 6 valus: stretch | flex-start | flex-end | center | space-between | space-around
child:
order: <integer>
flex-grow:<number> // default value:0 it's mains that even container remains spare space ,the child don't stretch.
flex-shrink:<number> // defalut value :1 auto condense
flex-basis : auto ?
flex: flex-grow || flex-shrink || flex-basis
align-items : // default is auto,it mains inherit parent flex property - auto | flex-start | flex-end | stretch | center | baseline
