CSS - centered flexbox columns with even margins

Question

We can achieve it through  justify-content: center; in the parent div.

HTML

<div class="container">
  <div class="column">
    <!-- Content for first column -->
  </div>
  <div class="column">
    <!-- Content for second column -->
  </div>
  <!-- Add more columns as needed -->
</div>

 

CSS

.container {
  display: flex;
  justify-content: center;
}

.column {
  margin: 0 10px; /* Adjust the margin as needed */
}