如何使用 flexbox 填充网格

Question

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

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

____________________

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

我们在整个项目中都使用 primeNG，因此如果常规复选框在这种情况下更易于使用，请随时告诉我，我会进行切换。谢谢！

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

我要如何修改它才能使后续行（以及第一行）相互对立？谢谢！

Answer 1

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

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

Answer 2

您可以使用 align-content 属性，当 flexbox wraps 时，它会影响 flex lines。使用 align-content: flex-start - 请参阅下面的演示：

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

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

<div class="container">
  <div class="p-checkbox">
    <input type="checkbox" id="chk1" />
    <label for="chk1">Johnny Frank</label>
  </div>
  <div class="p-checkbox">
    <input type="checkbox" id="chk2" />
    <label for="chk2">Johnny Frank</label>
  </div>
  <div class="p-checkbox">
    <input type="checkbox" id="chk3" />
    <label for="chk3">Johnny Frank</label>
  </div>
  <div class="p-checkbox">
    <input type="checkbox" id="chk4" />
    <label for="chk4">Johnny Frank</label>
  </div>
  <div class="p-checkbox">
    <input type="checkbox" id="chk5" />
    <label for="chk5">Johnny Frank</label>
  </div>
  <div class="p-checkbox">
    <input type="checkbox" id="chk6" />
    <label for="chk6">Johnny Frank</label>
  </div>
  <div class="p-checkbox">
    <input type="checkbox" id="chk7" />
    <label for="chk7">Johnny Frank</label>
  </div>
</div>

如何使用 flexbox 填充网格

How to populate grid using flexbox

html

css

flexbox

primeng