Укладка столбцов элементов без интервала akward между строками

Question

Так что я должен сделать набор флажков любого числа, расположенных в столбцах. Я не могу понять, как это сделать без указания высоты, поэтому я использовал flexbox для создания строк, но это не сработает, когда есть элементы с несколькими строками текста. Это создаст вертикальный интервал, который я не хочу. Есть ли какое-нибудь чистое предложение исправить это? В screengrab я покажу, где я сейчас, расстояние между каждым полем должно быть однородным.

.filter-fields-container { 
    display: flex; 
    overflow-y: scroll; 
    max-height: 350px; 
    flex-wrap: wrap; 
} 

.filter-fields-container > .field { 
    flex: 1 0 33%; 
} 

.

<div class="container"> 
    <div class="field"> 
    <label> 
     <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> </label> 
    </div> 

    <div class="field"> 
    <label> 
     <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> </label> 
    </div> 

    <div class="field"> 
    <label> 
     <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> </label> 
    </div> 

    <div class="field"> 
    <label> 
     <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> </label> 
    </div> 

    <div class="field"> 
    <label> 
     <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> </label> 
    </div> 

    <div class="field"> 
    <label> 
     <input class="input-checkbox" id="InputAccusamus" name="Inputs" type="checkbox" value="Accusamus quam dolorum error" /> <span>Accusamus quam dolorum error</span> </label> 
    </div> 

    <div class="field"> 
    <label> 
     <input class="input-checkbox" id="InputNumquam" name="Inputs" type="checkbox" value="Numquam modi" /> <span>Numquam modi</span> </label> 
    </div> 
</div> 

Answer 1

вы можете попробовать column-fill:

.container { 
 
    -webkit-column-count:3; 
 
    -moz-column-count:3; 
 
      column-count:3; 
 
    -webkit-column-fill:balance; 
 
    -moz-column-fill:balance; 
 
      column-fill:balance; 
 
    width:100%; 
 
} 
 
.field { 
 
    display:inline-block; 
 
    width:100%; 
 
} 
 

 
/* extra ? */ 
 
input { 
 
    float:left; 
 
    } 
 
span { 
 
    display:block; 
 
    overflow:hidden; 
 
    } 
 

<div class="container"> 
 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputAccusamus" name="Inputs" type="checkbox" value="Accusamus quam dolorum error" /> <span>Accusamus quam dolorum error</span> </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputNumquam" name="Inputs" type="checkbox" value="Numquam modi" /> <span>Numquam modi</span> </label> 
 
    </div> <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> </label> 
 
    </div> 
 
</div>

результат большую часть времени в среднем выход желаемого codepen to play with, (add/remove elements)

---

для гибкого, вам необходимо установить ширину и позволяют элементы для обертывания, он будет заполнять строки за строкой, а не столбцы по столбцам.

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.field { 
 
    width: 33%; 
 
} 
 
/* extra ? */ 
 

 
input { 
 
    float: left; 
 
} 
 
span { 
 
    display: block; 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> 
 
    </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> 
 
    </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> 
 
    </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> 
 
    </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> 
 
    </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputAccusamus" name="Inputs" type="checkbox" value="Accusamus quam dolorum error" /> <span>Accusamus quam dolorum error</span> 
 
    </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputNumquam" name="Inputs" type="checkbox" value="Numquam modi" /> <span>Numquam modi</span> 
 
    </label> 
 
    </div> 
 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputLorem" name="Inputs" type="checkbox" value="Lorem ipsum dolor sit amet" /> <span>Lorem ipsum dolor sit amet</span> 
 
    </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputConsectetur" name="Inputs" type="checkbox" value="Consectetur adipisicing elit" /> <span>Consectetur adipisicing elit</span> 
 
    </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputIpsa" name="Inputs" type="checkbox" value="Ipsa eligendi doloremque reiciendis laboriosam deleniti officia" /> <span>Ipsa eligendi doloremque reiciendis laboriosam deleniti officia</span> 
 
    </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputAd" name="Inputs" type="checkbox" value="Ad natus optio" /> <span>Ad natus optio </span> 
 
    </label> 
 
    </div> 
 

 
    <div class="field"> 
 
    <label> 
 
     <input class="input-checkbox" id="InputMaxime" name="Inputs" type="checkbox" value="Maxime ipsam quas culpa commodi" /> <span>Maxime ipsam quas culpa commodi</span> 
 
    </label> 
 
    </div> 
 
</div>

Answer 2

.filter-fields-container > .field { 
    flex: 1 0 33%; 
    height:50px; 
} 

высота nedded. Вы классы или не то же самое в html, как в css.