<div class="container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
/* Parent container */
.container {
display: flex;
flex-direction: column;
gap: 20px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
/* Child items */
.flex-item {
width: 50px;
height: 50px;
background-color: #4caf50;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.