screen.css

body {
  font-family: sans-serif;
  line-height: 1.5;
  padding: 0 20px;
}

/*
  Quick divide in 2 or more columns
*/

.flex-this {
  background: #EEE;
  width: 100%;
  display: -webkit-flex;
  display: flex;
}

.flex-this > div {
  -webkit-flex: 1;
  flex: 1;

  background: #DDD;
  margin: 10px;
  padding: 10px;
  
}

/*
  True vertical centering
*/

.center-this {
  background: #EEE;
  width: 100%;
  height: 200px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  align-items: center;
  justify-content: center;
}

.center-this div {
  background: #DDD;
  padding: 12px;
  margin: 12px; /* We can still use margin */
}


/*
  True vertical centering (with margin auto)
*/

.center-this-alt {
  background: #EEE;
  width: 100%;
  height: 200px;
  display: -webkit-flex;
  display: flex;
}

.center-this-alt div {
  margin: auto;
  background: #DDD;
  padding: 12px;
}

/*
  Spaced out
*/

.spaced-out {
  background: #EEE;
  width: 100%;
  text-align: center;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  display: flex;
  justify-content: space-between;
}

.spaced-out > div {
  background: #DDD;
  margin: 4px 2px;
  padding: 10px;
}

/*
  Control relations in forms
*/

.flex-form {
  display: -webkit-flex;
  display: flex;
}

.flex-form input[type="text"] {
  -webkit-flex: 1;
  flex: 1;
}

/*
  Flex wraps (2 cols)
*/

.flex-wraps {
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  display: flex;
  flex-flow: row wrap;
  padding: 12px;
  background: #EEE;
}

.flex-wraps div {
  width: 100%;
  -webkit-flex: 0 1 46%;
  flex: 0 1 46%;
  background: #DDD;
  padding: 1%;
  margin: 1%;
}

/*
  Fixed + liquid
*/

.fixed-liquid {
  display: -webkit-flex;
  display: flex;
  background: #EEE;
}

.fixed-liquid .fixed {
  width: 200px;
  background: #CCC;
}

.fixed-liquid .liquid {
  -webkit-flex: 1;
  flex: 1;
  background: #DDD;
}