Vertical Staggering with Flex

by Daniel Pegues

HTML

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.container {
  display: flex;
  /* width: 200px; */
  /* height: 200px; */
  margin: 25px;
  border:1px solid grey;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
}

.item {
  margin: 15px 0;
  height: 100px;
  width: 50%;
  background: blue;
  flex-shrink: 0;
}

.container .item:nth-child(2) {
  align-self: flex-end;
  background: red;
  margin: -50px 0;
  /*
  margin-right: 0;
  */
}