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>


Posted

in

by

Tags: