Can I use flex to put dividers on multiple rows? - html

Question

I am trying to display multiple checkboxes on the screen. But I want the checkboxes to all line up vertically and horizontal to look like a grid.
The first thing that came to my mind is to use flex to do it. But I'm not sure how to use flex to auto wrap every 4 dividers.
Here is what I have done:
.card
{
flex : 1;
}
.flex-wrapper
{
display:flex;
}
<div class="flex-wrapper">
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 1
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 2
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 3
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 4
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 5
</label>
</div>
</div>
You can also use this jsFiddle to tinker with the code.
From this code I want to tell flex to start a new line after the 4th divider inside the flex-wrapper divider.
Is this something that can be done using flex or do I need to use css bootstrap grid system?

Answer 1

To make the checkboxes break to multiple rows on the 4th element, you can give your .card div's a width: 25%; (instead of flex: 1;), and give your .flex-wrapper a flex-wrap: wrap;
.card
{
width: 25%;
}
.flex-wrapper
{
display: flex;
flex-wrap: wrap;
}
<div class="flex-wrapper">
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 1
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 2
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 3
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 4
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 5
</label>
</div>
<div class="card">
<label class="checkbox-inline">
<input type="checkbox" value=""> name 6
</label>
</div>
</div>