<div class="big-wrap">
<div class="block block-1">1</div>
<div class="block block-2">2</div>
<div class="block block-3">3</div>
<div class="block block-4">4</div>
</div><!-- big-wrap -->
.big-wrap {
display: flex;
flex-flow: row wrap;
align-content: center;
/* Comment out the next line to see the effect */
align-items: center;
/* etc. */
height: 50vh;
background-color: white;
padding: 10px;
border: 1px solid black;
}
.block {
color: white;
font-size: 2.6rem;
text-align: center;
padding: 10px;
border: 1px solid black;
width: 100px;
height: 100px;
}
.block-1 {
background-color: #dcf1fe;
height: 150px;
}
.block-2 {
background-color: #50bcfa;
width: 150px;
/* Toggle this to override the align items */
/* align-self: baseline; */
}
.block-3 {
background-color: #0379bd;
height: 150px;
}
.block-4{
background-color: #fec333;
}
This Pen doesn't use any external JavaScript resources.