Flexbox CSS

The CSS Flexible Box Layout Module simplifies the creation of flexible responsive layout structures without the use of floats or positioning. When we say flexbox is one-dimensional, we are referring to the fact that it only works with one dimension at a time — either a row or a column.

display

.container {
    display: flex | inline-flex;
  }

flex-direction

.container {
    flex-direction: row | row-reverse | column | column-reverse;
  }

flex-wrap

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
  }

justify-content

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  }

align-content

.container {
    align-content:flex-start | flex-end | center | stretch | space-between | space-around;
  }

align-item

.container {
    align-items: flex-start | flex-end | center | stretch | baseline;
  }

align-self

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
  } 

flex-grow

.item {
    flex-grow: 2; /* default 0 */
  }

flex-shrink

.item {
    flex-shrink: 4; /* default 1 */
  }

order

.item {
    order:2; /* default 1 */
  }