< Back to Code

CSS Flex – Basic

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>
vi

© Copyright by JAYbranding – All rights reserved.

We would like to advise you in more detail.
Please enter information to receive a consultation