CODEWITHSUNDEEP
htmlcssflexbox
Jaylen
Jaylen

Reputation: 40361

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?

Upvotes: 2

Views: 497

Answers (1)

Hunter Turner
Hunter Turner

Reputation: 6894

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>

Upvotes: 2

Related Questions