柔性物品是否可以与其上方的物品紧密对齐？

Question

实际上,这是Pinterest布局.但是,在线发现的解决方案包含在列中,这意味着容器无意中水平生长.这不是 Pinterest布局,并且它不适用于动态加载的内容.

我想要做的是有一堆固定宽度和不对称高度的图像,水平放置,但当满足固定宽度容器的限制时包裹在一个新行中:

flexbox可以做到这一点,还是我不得不求助于像Masonry这样的JS解决方案？

Answer 1

Flexbox是一种"一维"布局系统:它可以沿水平或垂直线对齐项目.

真正的网格系统是"二维的":它可以沿水平和垂直线对齐项目.换句话说,单元格可以跨越列和行,而flexbox不能这样做.

这就是Flexbox构建网格的能力有限的原因.这也是为什么W3C开发了另一种CSS3技术Grid Grid(见下文)的原因.

在Flex容器中flex-flow: row wrap,flex项必须换行到新行.

这意味着flex项不能包装在同一行中的另一个项下.

注意上面div#3如何包装在div#1下面,创建一个新行.它不能包裹在div#2下面.

因此,当物品不是行中最高的时,空白区域仍然存在,从而产生难看的间隙.

^{图片来源:Jefree Sujit}

column wrap 解

如果切换到flex-flow: column wrap,flex项目将垂直堆叠,并且更容易实现网格状布局.但是,列方向容器有三个潜在的问题:

1. 它水平扩展容器,而不是垂直扩展容器(如Pinterest布局).
2. 它要求容器具有固定的高度,因此物品知道包裹的位置.
3. 在撰写本文时,它在所有主要浏览器中都存在缺陷,其中容器不会扩展以容纳其他列.

结果,在许多情况下,列方向容器可能不可行.

其他方案

• 添加容器

  在上面的前两张图片中,考虑将项目2和3包装在一个单独的容器中.这个新容器可以是第1项的兄弟.完成.

  这是一个详细的例子:带有flexbox的计算器键盘布局

  一个值得强调的缺点:如果您想使用该order属性重新排列您的布局(例如在媒体查询中),此方法可能会消除该选项.

• Desandro Masonry

  Masonry是一个JavaScript网格布局库.它的工作原理是根据可用的垂直空间将元素放置在最佳位置,有点像石膏在墙上贴合石头.

  ^{来源:http://masonry.desandro.com/}

• 如何建立一个像Pinterest一样工作的网站

  [Pinterest]真的是一个很酷的网站,但我觉得有趣的是这些拼图是如何布局的...所以本教程的目的是重新创建这个响应块效果...

  ^{来源:https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html}

• CSS网格布局模块1级

  此CSS模块定义了一个基于网格的二维布局系统,针对用户界面设计进行了优化.在网格布局模型中,网格容器的子节点可以定位在预定义的灵活或固定大小的布局网格中的任意插槽中.

  ^{来源:https://drafts.c​​sswg.org/css-grid/}

  网格布局示例:仅CSS的砌体布局,但水平排序的元素

Answer 2

您可以通过CSS的3种 2种方式实现所需的功能：

1. flexbox：

    .parent {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-width: {max-width-of-container} /* normally 100%, in a relative container */
        min-height: {min-height-of-container}; /* i'd use vh here */
    }
    .child {
        width: {column-width};
        display: block;
    }

2. CSS列

（此解决方案具有内置的非常整洁的优点column-span-标题非常方便）。缺点是在列中订购商品（第一列包含商品的前三分之一，依此类推...）。我为此做了一个jsFiddle。

    .parent {
        -webkit-columns: {column width} {number of columns}; /* Chrome, Safari, Opera */
        -moz-columns: {column width} {number of columns}; /* Firefox */
        columns: {column width} {number of columns};
    }
    .child {
         width: {column width};
    }
    /* where {column width} is usually fixed size 
     * and {number of columns} is the maximum number of columns.
     * Additionally, to avoid breaks inside your elements, you want to add:
     */
    .child {
        display: inline-block;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid-column;
    }

3.砌体插件

通过JavaScript（砌体插件）计算渲染的项目大小后的绝对定位。