Почему masonry выстраивается в одну колонку?

Question

[Skrolea]

Добрый день. Использую masonry на одной из страниц. Беда - все items выстраиваются в одну колонку, а не как должно быть.

Codepen

<div class="container">
  <div class="list-block" >
		<div class="card card-news card-item">
         		<div class="card__content">
		        	<h3><a href="/detail.php?ID=69941">По итогам I полугодия 2016г</a></h3>
				<p>По итогам I полугодия 2016г </p>
			</div>
		</div>

$('.list-block').masonry({ 
  itemSelector: '.card-item',
  columnWidth: 280,
  gutter: 20,
  transitionDuration: 10,
  initLayout: true
  });
По ширине должны проходить в три столбца. Но вот не проходят. Ширина container 1200px, ширина card - 290px

Codepen

Answer 1

[Zam_Bo]

У вас не подключен masonry
prnt.sc/exc4mz

Comments

[Сергей Горячев]

Я думал, мне одному показалось, что там стили только от флексов, и никакого масонри нет) Оказывается, не только мне так кажется)))

[Skrolea]

Я прошу прощения))) В кодепен не подключил (опубликовал вопрос и стал искать cdn с masonry. Сейчас подключил)). На странице подключен и применяет стили к элементам, но не выстраивает как надо. Ну, собственно, и в кодепен теперь применяет
position: relative; height: 1991.38px;, но тоже не выстраивает

[Zam_Bo]

Нужно задать ширину блоку .list-block. Или, как ниже пишет Роман, контейнер сделать блочным. При контейнере-флексе .list-block ужимается до содержимого.
prntscr.com/excd7b

[Skrolea]

Да, спасибо. Ширина решила (не хотелось бы контейнер изменять. Жаль, конечно, что приходится использовать абсолютные величины, но видимо только так

Answer 2

[Mr Crabbz]

Потому что вы .container задали:

.container {
display: flex;
}

Если поменять на display:block - всё работает. Очевидно, что конфликт с флексом.

Comments

[Skrolea]

Спасибо