弹性布局中的水平多个复选框

Question

我在表单中水平设置了一些复选框。它们是动态设置的，因此数量可以改变。我使用了 flex 和 flex wrap 来让复选框换行到下一行。这是 html:

.form-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.wrap {
  min-width: 12em;
  max-width: 12em;
}

<div [hidden]="hidden">
  {{label}}
  <div class="form-group pl-4 mb-0">
    <div class="wrap" *ngFor="let enum of this.enumArray">
      <input [id]="enum" type="checkbox" (input)="getValue($event)" (change)="onChange($event)" value="enum" class=" form-check-input mt-1">
      <label class="form-check-label">{{enum}}</label>
    </div>
    <span class="description">{{description}}</span>
    <span class="error-msg">{{error}}</span>
  </div>
</div>

复选框看起来很棒，直到最后一行有 3 或 4 个不知何故未对齐。即使我有 10 或 100 个复选框，最后一行始终未对齐。这是我的意思的一个例子： Here is the layout

如果我能得到一些关于正在发生的事情的指导，我将不胜感激。谢谢你的时间。

Answer 1

使用 css grid 可能是解决此问题的更好方法。看起来最后一行没有与前几行相同数量的元素，并且元素正在拉伸以填充 space.

如果您想使用 flex，您可以在子元素上设置 max-width，但这似乎是 grid 的一个很好的用例。我是这样开始的：

display: grid;
grid-template-columns: repeat(6, 1fr);

这将创建 6 equally-sized 列。您还可以查看 this guide 以获取更多信息和网格方面的帮助。

Answer 2

我认为问题出在您证明内容合理以强制子 div 填充额外内容的方法 space。这是一个简单的替代方案：

.form-group{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.wrap{
  flex: 0 0 12em;
}

弹性布局中的水平多个复选框

Multiple checkboxes horizontally in flex-layout

html

css

flexbox