Justify Content: Space Around
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></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 class="wrapper2">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></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>
English 