CSS - centered flexbox columns with even margins

0 votes
29 views
added Feb 21 in CSS by lcjr First Warrant Officer (11,830 points)

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 */
}

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...