Multiple checkboxes horizontally in flex-layout-CodePudding

I've got some checkboxes set horizontally in my form. They are dynamically set, so the amount can change. I've used flex, and flex wrap to allow the checkboxes to wrap to the next line. Here is the html:

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

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

<div [hidden]="hidden">
  {{label}}
  <div >
    <div  *ngFor="let enum of this.enumArray">
      <input [id]="enum" type="checkbox" (input)="getValue($event)" (change)="onChange($event)" value="enum" >
      <label >{{enum}}</label>
    </div>
    <span >{{description}}</span>
    <span >{{error}}</span>
  </div>
</div>

The checkboxes look great, until the last line where 3 or 4 of them somehow become unaligned. Even if I have 10 or 100 checkboxes the last line is always unaligned. Here is an example of what I mean: Here is the layout

If I could get some guidance as to what is happening I'd greatly appreciate it. Thanks for your time.

CodePudding user response：

Using css grid might be a better solution to this problem. It looks like the last line doesn't have the same number of elements as the previous lines and the elements are stretching to fill the space.

If you want to use flex, you could set a max-width on the child elements, but this does seem like a great use case for grid. Here's how I'd start:

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

This will create 6 equally-sized columns. You could also check out this guide for more info and help with grid.

CodePudding user response：

I believe the issue is with your method of justifying the content to force the child divs to fill the extra space. This is a simple alternative:

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