具有可扩展内容的 Flexbox 砌体答案

【问题标题】：Flexbox masonry with expandable content具有可扩展内容的 Flexbox 砌体
【发布时间】：2016-05-24 10:15:06
【问题描述】：

我正在寻找一种用 flexbox 替换砌体网格的方法。我面临的挑战是我拥有的内容是可扩展的。这个问题有已知的解决方案吗？

【问题讨论】：

【解决方案1】：

我认为这可能会有所帮助：https://jsfiddle.net/kunji/t91xppcx/

这基本上是一个响应式 flexbox 网格，在网格的第三个项目上，我添加了一些内容，当您单击更多时可以显示这些内容。下面一行中的项目向下移动，而上面框中的内容展开。

这是我在更多内容（JQuery）上使用的：



    var $clickme = $('.clickme'),
        $box = $('.box');

    $box.hide();

    $clickme.click( function(e) {
        $(this).text(($(this).text() === 'Hide' ? 'Show' : 'Hide')).next('.box').slideToggle();;
        e.preventDefault();
    });

【讨论】：

是的，这很好，但上面的示例并不完全是砖石网格，即。它会扩展所有框，而不仅仅是附加了内容的框。
你可以改变 -webkit-align-items: flex-start;对齐项目：弹性开始；在 css 中，这将为项目提供各自的高度。