javascript – Flex项目是否可以与其上方的项目紧密对齐？

这实际上是Pinterest布局.然而,在线查找的解决方案是以列形式包装的,这意味着容器会无意中水平增长.这不是Pinterest布局,它对动态加载的内容不能很好地工作.

我想要做的是一堆固定宽度和不对称高度的图像,水平布置,但是当满足固定宽度容器的限制时,将其包装在新行中：

flexBox可以做到这一点吗,还是要诉诸于像石工这样的JS解决方案？

解决方法

FlexBox是一个“一维”布局系统：它可以沿着水平或垂直线对齐项目.

真正的网格系统是“二维”：它可以沿着水平和垂直线对齐项目.换句话说,单元格可以跨越列和行,这是flexBox无法做到的.

这就是为什么flexBox的建造网格容量有限.这也是W3C开发另一种CSS3技术,Grid Layout(见下文)的原因.

在具有flex-flow的flex容器中：行换行,flex项必须包装到新行.

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

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

因此,在每列中保留了不是行中最高的项目创建的空白空间,创建了不好的空白.

图片来源：Jefree Sujit

列包装解决方案

如果切换到flex-flow：column wrap,flex项将垂直堆叠,并且可以实现类似网格的布局.然而,一个列方向的容器有三个潜在的问题：

>它水平扩展容器,而不是垂直扩展(像Pinterest布局).
> It requires the container to have a fixed height,so the items know where to wrap.
>在撰写本文时,它在所有主要浏览器中都有缺陷,其中the container doesn’t expand to accommodate additional columns.

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

其他解决方案

>添加容器

在上面的第一张图片中,考虑将物品2和3包装在单独的容器中.这个新容器成为第1项的兄弟.完成.

一个值得强调的缺点：如果要使用order属性在媒体查询中重新排列布局,则此方法可能会消除该选项.
> Desandro Masonry

Masonry is a JavaScript grid layout library. It
works by placing elements in optimal position based on available
vertical space,sort of like a mason fitting stones in a wall.

^{source: 07008}

> How to Build a Site that Works Like Pinterest

[Pinterest] really is a cool site,but what I find interesting is how these pinboards are laid out… So the purpose of this tutorial is to re-create this responsive block effect ourselves…

^{source: 070010}

> CSS Grid Layout Module Level 1

This CSS module defines a two-dimensional grid-based layout system,optimized for user interface design. In the grid layout model,the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

^{source: 070012}

原文地址：https://www.jb51.cc/js/152530.html