Live
x
<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> -->
Live
xxxxxxxxxx43
.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.