<div class="container1">
    <div class="box a">AAAA</div>
    <div class="box b">BBBB</div>
    <div class="box c">CCCC</div>
  </div>
 <div class="container2">
    <div class="box a">AAAA</div>
    <div class="box b">BBBB</div>
    <div class="box c">CCCC</div>
  </div> 
<!--   <div class="container3">
    <div class="box a">AAAA</div>
    <div class="box b">BBBB</div>
    <div class="box c">CCCC </div>
  </div> 
 -->
<!--   <div class="container4">
    <div class="box a">AAAA</div>
    <div class="box b">BBBB </div>
    <div class="box c">CCCC </div>
  </div>  -->
.container2 {
  height:100vh;
}

.box {
  width:100px;
}
.a{
  background-color: lightblue;

}
.b{
  background-color: lightsalmon;

}
.c{
  background-color: lightyellow;

}
.container1 {
  display:flex;
  justify-content:space-around;
  margin-bottom:10px;
}

.container2 {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  margin-bottom:10px;
}

/* .container3 {
  display:flex;
   flex-direction:column;
  margin-bottom:10px;
}*/ 

/* .container4 {
  display:flex;
   flex-direction:column-reverse;
  margin-bottom:10px;
} */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.