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

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

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

Answer 2

当flexbox 换行时，您可以使用影响弹性线的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>

如何使用flexbox

2 个答案: