html - 如何使用 flexbox 填充网格

标签 html css flexbox primeng

<分区>

我正在尝试填充一个由 n x 4 个 primeNG 复选框(带有标签)组成的网格,我想知道如何使用 flexbox 来做到这一点。
我希望它看起来像这样:

____________________
x    x    x    x    
x    x    x    x    
x    x    x    x    

____________________

无论垂直方向有什么可用空间,我都希望它被单独放置而不被利用。 (相反,如果存在太多行,将显示滚动条)当我用 flexbox(和 flex-wrap: 1)尝试这个时,它使用所有垂直空间,比如只有 6 个框(4对于第一行,第二行中有 2 个在容器的中间位置)。我想为每个复选框设置指定的高度。此外,每一列也需要指定宽度,因此如果标签溢出,将显示省略号。

我们在整个元素中都使用 primeNG,因此如果常规复选框在这种情况下更容易使用,请随时告诉我,我会进行切换。谢谢!

这是它的作用: https://jsfiddle.net/6rtL0p8v/

我将如何修改它,使后续行(和第一行)保持相对?谢谢!

最佳答案

.container {
  width: 500px;
  height: 600px;
  background: silver;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.p-checkbox {
  margin-right: 10px;
}

关于html - 如何使用 flexbox 填充网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46283816/

相关文章:

css - 为什么通过网格线而不是行/列号将元素定位在 css 网格上?

html - 如何只使 flex 元素溢出而不是整个父元素?

javascript - 防止 jQuery 动画排队

javascript - 基本 Javascript + PHP Ajax 文件上传

html - 制作一个容器来填充内容?

css - body 的替代方案{溢出:scroll;} That Will Prevent Page JoSTLing/Wriggling?

html - CSS 内联 block vs 向左浮动 : alignment mismatch

html - 如何使内容框垂直固定

css - 具有填充所有可用空间的中心元素的 Flex-box

html - 为 flex 元素设置最大宽度?