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

© Copyright by JAYbranding – All rights reserved.

Chúng tôi mong muốn tư vấn chi tiết hơn cho quý khách.
Vui lòng nhập thông tin để nhận tự vấn