<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; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.