Flexbox

 

Container
display: flex;
flex-direction: row; | column | column-reverse | row-reverse
flex-wrap: nowrap; | wrap | wrap-reverse
flex-flow: row nowrap; shorthand to set flex-direction & flex-wrap properties together
justify-content: flex-start; | flex-end | center | space-between | space-around | space-evenly
align-items: flex-start; | flex-end | center | baseline | stretch
align-content: flex-start; | flex-end | center | space-between | space-around | stretch

 

Children
order: <integer>; default: 0
flex-grow: <number>; default: 0     proportional spacing value
flex-shrink: <number>; default: 1
flex-basis: <length>; | auto     default: auto
flex: 0 1 auto;

| none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 2nd & 3rd optional

 

shorthand for flex-grow, flex-shrink and flex-basis combined.

align-self: auto; | flex-start | flex-end | center | baseline | stretch;

 

 

*float, clear and vertical-align have no effect on a flex item.