Jaylen Jaylen - 2 months ago 11
HTML Question

Can I use flex to put dividers on multiple rows?

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

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>

Comments