Cacher is the code snippet organizer for pro developers

/* http://html5.by/blog/flexbox/ */
#content {
  display: flex;
  background-color: grey;
  width: 300px;
  height: 300px;
  
  flex-direction: column; /* row, row-reverse, column, column-reverse */
  justify-content: flex-end; /* flex-start, flex-end, center, space-between, space-around */
  align-items: center; /* stretch, flex-start, flex-end, center, baseline */
  
  flex-wrap: wrap; /* nowrap, wrap, wrap-reverse */
  
  align-content: center; /* stretch, flex-start, flex-end, center, space-between, space-around */
}

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  margin: 5px;

  flex-basis: 1em;
  flex-grow: 1;
}

.box:first-child {
  flex-grow: 5;
  /* margin: auto; */  /* работает по вертикали! */
}

.box:last-child {
  align-self: flex-end;
  /* order: 2; */
}