Isotope 与 Flexbox 配合得不好，还是只有我一个人？答案

【问题标题】：Doesn't Isotope play nice with Flexbox, or is it just me?Isotope 与 Flexbox 配合得不好，还是只有我一个人？
【发布时间】：2017-04-21 14:33:19
【问题描述】：

我有一个带有 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 });
});

Isotope 不能很好地与 Flexbox 一起“工作”吗？或者我错过了一些同位素 jQuery 选项。还是我对 Flexbox 属性不够精确？

谢谢。

jsfiddle 请求 https://jsfiddle.net/Lyqdguvz/

【问题讨论】：

相当肯定同位素不能真正与 Flexbox 一起使用，但指向 jsfiddle 的链接会有所帮助。
给你：jsfiddle.net/Lyqdguvz
现在我很困惑！有用。我不知道为什么它会破坏我的 WordPress 网站。我运行的唯一其他 jQuery 和 JS 是 slick 和 lightgallery，我尝试在 function.php 和 .js 文件中对脚本和 css 进行注释。毫无头绪。

标签： javascript jquery flexbox jquery-isotope

【解决方案1】：

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

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

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

【讨论】：

注意：我的评论不是答案 @rhysclay 'fitRows' 有效地将同位素行渲染到给定行中最高元素的高度。但是，该行中的其余元素不是最大高度，即 flexbox 拉伸高度。这就是我要找的。不幸的是，Isotope 似乎不会使用 Flexbox 的高度方面：https://github.com/metafizzy/isotope/issues/1234
这是一个Possible fix 角度 - 如果时间允许，我会试试这个。

【解决方案2】：

好的，我解决了。

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

【讨论】：