Using Flexbox to get divs in 4 corners

Flexbox corners.css

/**
 * Base styles to get us started...
 */

.container {
  background-color: black;
  box-sizing: border-box;
  text-align: center;
}
.item {
  color: white;
  font-family: Avenir, sans-serif;
  font-size: 18px;
  height: 100px;
  text-transform: uppercase;
  width: 100px;
}
/* .item:nth-child(n) {

}
.item:nth-child(2n) {

}
.item:nth-child(3n) {
  
}
.item:nth-child(4n) {
} */

/**
 * Let's flexbox this!
 */

.container {
  display:flex;
  height:100vh;
  justify-content:space-between;
  flex-wrap:wrap;
}

.item{
  display:flex;
  flex: 0 1 50%;
  flex-direction:column;
}

span{
  display:block;
  width:100px;
  height:100px;
}

.item:nth-child(3){
  align-self:flex-end;
}

.item:last-child{
  align-self:flex-end;
}

.item:first-child span {
    background-color: Crimson;
}

.item:nth-child(2) span{
    background-color:RoyalBlue;
}

.item:nth-child(3) span{
    background-color: DarkCyan;
}

.item:last-child span {
    background-color: Chocolate;
}

.item:nth-child(2) span,
.item:last-child span{
    align-self:flex-end;
}

Flexbox corners.html

<!-- RED ACADEMY: FLEXBOX DEMO -->

<div class="container">
  <div class="item"> <span>Item 1</span> </div>
  <div class="item"> <span>Item 2</span> </div>
  <div class="item"> <span>Item 3</span> </div>
  <div class="item"> <span>Item 4</span> </div>
</div>