CSS Flex – Basic

Justify Content: Space Around

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<style>
.wrapper{
display: flex;
justify-content: space-around;
}
.block{
width: 100px;
height: 100px;
background-color: rgb(200,44,54,0.4);
border: red 2px solid
}
</style>

Justify Content: Space Between
Align Items: Center

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
.wrapper2{
display: flex;
height: 500px;
justify-content: space-between;
align-items: center;
}
.wrapper2 .block{
width: 100px;
height: 100px;
background-color: rgb(200,44,54,0.4);
border: red 2px solid
}
</style>