Как я могу правильно отображать свои divs в стиле кладки с использованием flex?

Я пытаюсь создать дисплей divs в стиле кладки, используя flex/flexbox. Он должен содержать не более двух столбцов. Каждый div имеет одинаковую ширину (поэтому он будет разделен на 2 столбца равномерно), но высота зависит от содержимого div. Таким образом, некоторый рост будет меньше, чем другие.Как я могу правильно отображать свои divs в стиле кладки с использованием flex?

Прямо к проблеме:
http://i.imgur.com/6wsS8nV.png

синие коробки мои дивы (ребенок) с содержанием в каждом из них. Вы можете заметить, что они имеют одинаковую ширину, а некоторые имеют меньшую высоту, чем другие.

Задача: Существует большой разрыв между верхним и нижним дочерним элементом в левой колонке. Нижний ребенок должен перемещаться до нижней части верхнего ребенка. Как я могу это сделать?

EDIT:

Вот CSS в использовании:

#main { 
    width: 100%; 
    height: auto; 
    display: -webkit-flex; /* Safari */ 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

.divBob { 
    -webkit-flex: 1; /* Safari 6.1+ */ 
    -ms-flex: 1; /* IE 10 */  
    flex: 0 1 auto; 
    padding: 5px; 
    border: 1px solid #CCE0FF; 
    margin: 5px; 
    width: 45%; 
    height: 100%; 
    background-color: #F0F3FA;//#F9FBFF; 
} 

.divBob:nth-child(2n+1) { 
    clear: right; 
}

источник

2015-08-07 Evanmc

'flexbox' не может сделать макеты кладки в стиле, если не использовать фактические столбцы вместо строк. –

Я могу делать столбцы, тогда это приведет меня к другому вопросу, как я могу разделить детские divs пополам? Например, допустим, у меня есть 10 дочерних div, все они сидят в 1 столбце, как я могу разбить его пополам, так что 5 находятся в левом столбце, а 5 - в правом столбце – Evanmc

Есть ли какой-либо причине он должен быть с Flexbox?

Если вы не против использования альтернативного метода, то this tutorial покажет вам, как создавать макетные макеты. Here's what you'll end up with.

Демо-разметка выглядит следующим образом:

<div class="masonry"> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
    <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div> 
    <div class="item">Incidunt sit unde minima in nostrum?</div> 
    <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div> 
    <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div> 
    <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div> 
</div>

Мы используем свойства CSS column-count и column-gap, которые применяются к родительскому элементу, чтобы определить количество столбцов в макете:

.masonry { /* Masonry container */ 
    -moz-column-count: 4; 
    -webkit-column-count: 4; 
    column-count: 4; 
    -moz-column-gap: 1em; 
    -webkit-column-gap: 1em; 
    column-gap: 1em; 
}

Вам необходимо применять этот стиль для каждого ребенка:

.item { /* Masonry bricks or child elements */ 
    display: inline-block; 
    margin: 0 0 1em; 
    width: 100%; 
}

В учебнике также ссылка на JS fallback для старых браузеров

и это все, что вам нужно создать макет Кладки стиля :)

источник

2015-08-07 15:09:14 Pixelomo

Как я могу правильно отображать свои divs в стиле кладки с использованием flex?

ответ

Смежные вопросы