时间戳

首页 > 解决方案 > 合适的 CSS 显示以在每行中显示任意行数的 3 个项目？

css - 合适的 CSS 显示以在每行中显示任意行数的 3 个项目？

问题描述

我有一个我希望显示的项目列表。起初我使用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; ... ???
}

如果我能以某种方式将项目 3×3 推出，则上述 CSS 将起作用。我可以在组件代码中使用一些逻辑来做到这一点，但这似乎是一个丑陋的黑客。我更喜欢以适当的方式解决它。

标签： cssangularflexboxgrid

解决方案

对于 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/

推荐阅读