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>

一切都很好，按钮过滤器导航也正常工作。但是当我在我的.js文件中初始化Isotope时，整个布局都会崩溃，图像会消失，所有内容都会堆叠在一起。

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 by request https://jsfiddle.net/Lyqdguvz/

Answer 1

好的，我解决了。

我忘记包含的是我将.grid父容器#main设置为display: flex和flexwrap: wrap。删除容器显示属性解决了它。

Answer 2

据我所知，后来的同位素版本可以很好地与flex一起使用（我目前正在使用它与flexbox项目），但你需要在你的js中添加布局模式选项：

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

还有其他布局模式选项可用 - 请查看此资源： http://isotope.metafizzy.co/layout-modes.html

同位素不适合Flexbox，还是仅仅是我？

2 个答案: