css - 合适的 CSS 显示每行显示 3 个元素，行数任意？

Question

我有一个要显示的元素列表。起初我用 display: flex但注意到当换行发生时，元素没有水平对齐。然后我切换到display: grid但这需要我提前知道行数。

什么样的显示适合创建每行有 n 个元素的任意多个元素的网格？

<div class="element">
  <app-check *ngFor="let item of items" [caption]="item.name">
  </app-check>
</div>

div.elements {
  display: ???; ...
}

app-check {
  flex: 1 1 auto; ... ???
}

如果我能以某种方式将元素三个三个地推出，那么上面的 CSS 就可以工作了。我可以在组件代码中使用一些逻辑来做到这一点，但这似乎是一个丑陋的 hack。我更愿意以适当的方式解决它。

Answer 1

对于 3 个元素，你可以用类似的方式来做，只需使用 flex-basis: 33% 作为子元素:

div.element {
    display: flex;
    flex-wrap: wrap;
}

app-check {
    flex: 1 0 33%;
}

<div class="element">
    <app-check *ngFor="let item of items" [caption]="item.name">
    </app-check>
</div>

这是学习flexbox的好地方: https://css-tricks.com/snippets/css/a-guide-to-flexbox/