我可以使用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的（而不是flex: 1;）一width: 25%;，并给你的.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>