.css

Question

我正在尝试在每种分辨率下将相等的宽度分配给每个div，但对于div，max-width不应大于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具有very good guide可以弯曲，这就是flex-basis的意思。

这定义了剩余空间分配之前元素的默认大小。

剩余空间被最后一个项目填充。您应该摆脱flex-basis并使用百分比（或某种定义的宽度），或者重新考虑使用flexbox并将其替换为CSS网格。

如何在每个分辨率下对齐项目以使其宽度相等

.css

.ts

.html

2 个答案: