我可以使用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>