flexbox

by tammasr

HTML

<div class="container top">
  <div class="child">1</div>
  <div class="child">2</div>
  </div>
<div>
   <div class="child">3</div>
  <div class="child">4</div>
</div>

CSS

.container {
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}

.child{
  width: 50px;
      /* flex:70%; */

  height: 50px;
  padding: 10px;
  border: 1px solid blue;
  background-color: pink;
}

.child:first-child{
  background-color: red;
}
.child:nth-child(2){
    background-color: blue;

}
.child:nth-child(3){
  align-self: end;
  background-color: green;

}
.child:nth-child(4){
  align-self: end;
  background-color: yellow;
}