Не изотоп хорошо играет с Flexbox, или это только я?

Question

У меня есть базовый макет с flexbox.

CSS:

.grid { 
    display: flex; 
    flex-wrap: wrap; 
} 
.element-item { 
    flex-direction: row; 
    width: calc(100%/2); 
} 
.element-item img { 
    width: 100%; 
    height: 16em; 
    object-fit: cover; 
} 

HTML:

<div class="grid"> 
    <div class="element-item taxonomy"> 
     <img class="attachment-post-thumbnail" src="image-1.jpg" alt="image-1" /> 
     <h3>Title</h3> 
     <h5>Taxonomy</h5> 
    </div> 
    ... 
</div> 

Все хорошо, кнопка фильтра навигации работает тоже. Но когда я инициализирую Isotope в моем .js-файле, весь макет рушится, изображения исчезают, и все укладывается друг на друга.

JQuery::

// init Isotope 
var $grid = $('.grid').isotope({ 
    // options 
    itemSelector: '.element-item', 
}); 

// filter items on button click 
$('.filter-button-group').on('click', 'button', function() { 
    var filterValue = $(this).attr('data-filter'); 
    $grid.isotope({ filter: filterValue }); 
}); 

Не изотоп "работу" хорошо с Flexbox? Или мне не хватает опции Isotope jQuery. Или я не был достаточно точным с помощью свойств Flexbox?

Спасибо.

jsfiddle по запросу https://jsfiddle.net/Lyqdguvz/

Answer 1

Хорошо, я решил.

Что я забыл включить в то, что у меня был родительский контейнер .grid#main, установленный на display: flex и flexwrap: wrap. Снятие свойств отображения контейнеров решило его.

Answer 2

Насколько я могу сказать, более поздние версии изотопным дружат с Flex (я в настоящее время, используя его с проектом Flexbox), но вам нужно добавить опцию режима макета вашего ЯШАМ:

// init Isotope 
var $grid = $('.grid').isotope({ 
    // options 
    itemSelector: '.element-item', 
    layoutMode: 'fitRows' 
}); 

Доступны также другие варианты режима компоновки - ознакомьтесь с этим ресурсом: http://isotope.metafizzy.co/layout-modes.html