Flexbox corners

flexboxcorners.css

*, *::before, *::after { box-sizing: border-box; }

.flexbox-corners {
  background-color: DarkCyan;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flexbox-corners > div {
  flex: 0 1 50%;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}

.flexbox-corners > div > div {
  background-color: gray;
  padding: 16px 24px;
  width: -moz-fit-content;
  width: fit-content;
}

.flexbox-corners > div:nth-child(2) {
  justify-content: flex-end;
}

.flexbox-corners > div:nth-child(3) {
  align-self: flex-end;
}

.flexbox-corners > div:nth-child(4) {
  align-self: flex-end;
  justify-content: flex-end;
}

flexboxcorners.html

<div class="flexbox-corners">
  <div>
    <div>
      <span>1</span>
    </div>
  </div>
  <div>
    <div>
      <span>2</span>
    </div>
  </div>
  <div>
    <div>
      <span>3</span>
    </div>
  </div>
  <div>
    <div>
      <span>4</span>
    </div>
  </div>
</div>