适合在每行中以任意行数显示 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 就会起作用。我可以在组件代码中使用一些逻辑来做到这一点，但这似乎是一个丑陋的黑客。我更喜欢以适当的方式解决它。

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>

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