CSS Flexbox Tricks

.menu > .left  { align-self: flex-start; }
.menu > .right { align-self: flex-end; }

.container {
  align-items: center;
}

Vertically-center all items.

.container {
  display: flex;
}
/\* the 'px' values here are just suggested percentages \*/
.container > .checkbox { flex: 1 0 20px; }
.container > .subject  { flex: 1 0 400px; }
.container > .date     { flex: 1 0 120px; }

This creates columns that have different widths, but size accordingly according to the circumstances.

.container {
  display: flex;
  flex-direction: column;
}
.container > .top {
  flex: 0 0 100px;
}
.container > .content {
  flex: 1 0 auto;
}

A fixed-height top bar and a dynamic-height content area.

.container > .top {
 order: 1;
}
.container > .bottom {
 order: 2;
}

.container {
  display: flex;
  /\* vertical \*/
  align-items: center; 
  /\* horizontal \*/
  justify-content: center;
}

.container {
  display: flex;
}
.container > div {
  width: 100px;
  height: 100px;
  margin: auto;
}