如何使用 flexbox 填充网格 [重复]

Question

我正在尝试填充 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/

我将如何修改它以使后续行彼此（和第一行）保持一致？谢谢！

Answer 1

您可以使用align-content 属性，该属性会在弹性盒换行时影响弹性线。使用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>

Answer 2

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

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