我想要做的是一堆固定宽度和不对称高度的图像,水平布置,但是当满足固定宽度容器的限制时,将其包装在新行中：
解决方法
真正的网格系统是“二维”：它可以沿着水平和垂直线对齐项目.换句话说,单元格可以跨越列和行,这是flexBox无法做到的.
这就是为什么flexBox的建造网格容量有限.这也是W3C开发另一种CSS3技术,Grid Layout(见下文)的原因.
在具有flex-flow的flex容器中：行换行,flex项必须包装到新行.
这意味着flex项目不能包含在同一行中的另一个项目下.
注意上面div#3如何包装在div#1之下,创建一个新行.它不能包裹在div#2之下.
因此,在每列中保留了不是行中最高的项目创建的空白空间,创建了不好的空白.
列包装解决方案
如果切换到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
