how to align flex items to have equal width at every resolution

I am trying to divide equal width to each div at every resolutions but max-width should not br greater than 138px for div?

But when resolution is changed the box at last is gaining width ie not equal to other divs?

How to fix that?

.css

  .flex-container {
      display: flex;
      background-color: #f1f1f1;
      flex-wrap: wrap;
    }
.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  flex-basis: 138px; 

.ts

data = [“Saab”, “Volvo”, “BMW”,“Saab”, “Volvo”, “BMW”,“Saab”, “Volvo”, “BMW”,…]

.html

   <div class=“flex-container” *ngFor=“let items of data”>
<div style=“flex-grow: 1”>1</div>
</div>


#javascript #html #css #angular

1 Likes1.50 GEEK