I have a basic layout with 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>

All good, the button filter navigation is working too. But when I init Isotope in my .js file, the whole layout collapses, the images disappear and everything is stacked on top of each other.

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 });
});

Doesn't Isotope "work" well with Flexbox? Or am I missing some Isotope jQuery option. Or haven't I been precise enough with the Flexbox properties?

Thanks.

jsfiddle by request /

I have a basic layout with 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>

All good, the button filter navigation is working too. But when I init Isotope in my .js file, the whole layout collapses, the images disappear and everything is stacked on top of each other.

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 });
});

Doesn't Isotope "work" well with Flexbox? Or am I missing some Isotope jQuery option. Or haven't I been precise enough with the Flexbox properties?

Thanks.

jsfiddle by request https://jsfiddle/Lyqdguvz/

• javascript
• jquery
• flexbox
• jquery-isotope

• Pretty sure isotope does not really work with Flexbox but a link to a jsfiddle would be helpful. – Macsupport Commented Sep 20, 2016 at 0:44
• Here you go: jsfiddle/Lyqdguvz – user6285978 Commented Sep 20, 2016 at 9:20
• Now I'm confused! It works. I have no clue why it's breaking my WordPress site. The only other jQuery and JS I've running is slick and lightgallery, and I've tried menting them the script and css from the function.php and the .js file. Clueless. – user6285978 Commented Sep 20, 2016 at 9:23

2 Answers 2

As far as I can tell the later versions of isotope play nicely with flex (I am currently using it with a flexbox project), but you need to add the layout mode option to your js:

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

There is also other layout mode options available - check out this resource: http://isotope.metafizzy.co/layout-modes.html

Okay I solved it.

What I forgot to include was that I had a .grid parent container #main set to display: flex and flexwrap: wrap. Removing that containers display properties solved it.