Flexbox corners (Some positioning with absolute)

flexboxcorners.css

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

.flexbox-corners {
  background-color: DarkCyan;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content:space-between;
  position: relative;
}
.flexbox-corners > div {
  width: 50px;
  height: 50px;
  background-color: DarkGray;
  display: grid;
  place-items: center;
}
.flexbox-corners > div:nth-child(2) {
  align-self: flex-end;
  position: absolute;
  bottom: 0;
  left: 0;
}
.flexbox-corners > div:nth-child(3) {
  align-self: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
}

flexboxcorners.html

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