html - 我可以使用 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分隔符内的第四个分隔符之后开始一个新行。

这是可以使用 flex 完成的事情还是我需要使用 css bootstrap 网格系统？

Answer 1

要使复选框在第四个元素上分成多行，您可以为 .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>