如何在每個分辨率下對齊項目以使其寬度相等

Question

我正在嘗試在每種分辨率下將相等的寬度分配給每個div，但max-width不應大於div的138px嗎？

但是，當分辨率改變時， li最終將獲得寬度，即不等於其他div，並且ul行周圍的空間沒有均勻分布，還剩下一些空間嗎？

如何解決？ 有什么辦法嗎？

.css

  .flex-container {
      display: flex;
      background-color: #f1f1f1;
      flex-wrap: wrap;
    }

    .flex-container > li{
      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

   <ulclass="flex-container" *ngFor="let items of data">
      <li style="flex-grow: 1">1</li>
    </ul>

Answer 1

使用可用空間的百分比http://learnlayout.com/percent.html例如

.flex-container > div {
     width: 10%;  //Uses 10% of available space
     // OR
     width: 10vw; //Uses 10% of viewport width
}

Answer 2

CSS-Tricks有很好的 flex 指南 ，這是有關flex-basis 。

這定義了剩余空間分配之前元素的默認大小。

剩余空間將被最后一個項目填充。 您應該擺脫flex-basis ，或者使用百分比（或某種定義的寬度），或者重新考慮使用flexbox並將其替換為css網格。