我可以使用flex将分隔线放在多行上吗？

Question

我正在尝试在屏幕上显示多个复选框。但我希望所有的复选框都垂直和水平排列，看起来像一个网格。

我想到的第一件事是使用flex来做。但我不确定如何使用flex来自动包装每4个分隔线。

这就是我所做的：

.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>

您也可以使用此jsFiddle来修补代码。

从这段代码中我想告诉flex在flex-wrapper分隔符内的第4个分隔符之后开始一个新行。

这可以使用flex完成，还是需要使用css bootstrap网格系统？

Answer 1

要使复选框在第4个元素上分为多个行，您可以将.card div设为width: 25%;（而不是flex: 1;），然后将.flex-wrapper一个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>