CSS Flexbox

.container > div {

  /\* This: \*/
  flex: 1 0 auto;
  /\* Is equivalent to this: \*/
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;

  order: 1;

  align-self: flex-start;  /\* left \*/
  margin-left: auto;       /\* right \*/

}

.container {

  display: flex;
  display: inline-flex;

  flex-direction: row;            /\* ltr - default \*/
  flex-direction: row-reverse;    /\* rtl \*/
  flex-direction: column;         /\* top-bottom \*/
  flex-direction: column-reverse; /\* bottom-top \*/

  flex-wrap: nowrap; /\* one-line \*/
  flex-wrap: wrap;   /\* multi-line \*/

  align-items: flex-start; /\* vertical-align to top \*/
  align-items: flex-end;   /\* vertical-align to bottom \*/
  align-items: center;     /\* vertical-align to center \*/
  align-items: stretch;    /\* same height on all (default) \*/

  justify-content: flex-start;    /\* [xxx ] \*/
  justify-content: center;        /\* [ xxx ] \*/
  justify-content: flex-end;      /\* [ xxx] \*/
  justify-content: space-between; /\* [x x x] \*/
  justify-content: space-around;  /\* [ x x x ] \*/
  justify-content: space-evenly;  /\* [ x x x ] \*/

}

.container {
  display: flex;
}

.container > div {
  flex: 1 1 auto;
}