<div>
<div id="global">
<div id="a" class="chunk">
<div class="round"></div>
</div>
<div id="b" class="chunk">
<div class="round"></div>
</div>
<div id="c" class="chunk">
<div class="round"></div>
</div>
</div>
</div>
<style>
#global {
width: 500px;
height: 500px;
display: flex;
flex-direction: column;
padding-left: 50px;
padding-right: 50px;
}
.chunk {
flex: 1;
background-color: antiquewhite;
display: flex;
align-items: center;
}
.round {
width: 100px;
height: 100px;
border-radius: 50px;
background-color: black;
}
#a { justify-content: flex-start; }
#b { justify-content: center; }
#c {justify-content: flex-end; }
</style>