Разделение блоков на несколько колонок [дубликат]

344

12 февраля 2017, 10:02

На данный вопрос уже ответили:

Разделение списка на несколько колонок 1 ответ

Расположил блоки в две колонки, но последний если последний блок в текущей колонке не помещается, то он частично переносится в новую, как сделать, чтобы блоки переносились целиком, не резались на 2 колонки?

Answer 1

Это можно реализовать с помощью flexbox:

.column { 
    display: inline-flex; 
    width: auto; 
    height: 200px; 
    flex-direction: column; 
    flex-wrap: wrap; 
} 
.column-block { 
    width: 100px; 
    height: 48px; 
    background-color: red; 
    border: 1px solid blue; 
}

<div class="column"> 
  <div class="column-block">Блок 1</div> 
  <div class="column-block">Блок 2</div> 
  <div class="column-block">Блок 3</div> 
  <div class="column-block">Блок 4</div> 
  <div class="column-block">Блок 5</div> 
  <div class="column-block">Блок 6</div> 
  <div class="column-block">Блок 7</div> 
</div>