Flex项目是否可以紧紧地alignment上面的项目？
实际上，这是Pinterest的布局。 但是，在线发现的解决scheme是用列包装的，这意味着容器无意中水平生长。 这不是 Pinterest的布局，它不适合dynamic加载的内容。
我想要做的是有一堆固定宽度和不对称高度的图像，水平放置，但在固定宽度容器的极限满足时，
Flexbox能做到这一点，还是我不得不诉诸像砌体JS解决scheme？
Flexbox是一维布局系统：它可以沿水平或垂直线alignment项目。
真正的网格系统是“二维”的：它可以沿着水平线和垂直线alignment项目。 换句话说，单元格可以跨越列和行，这是flexbox无法做到的。
这就是为什么flexbox的网格build设能力有限。 这也是为什么W3C开发另一个CSS3技术， 网格布局 （见下文）的原因。
在具有flex-flow: row wrap的柔性容器中flex-flow: row wrap柔性项目必须换行到新行 。
这意味着Flex项目不能包装在同一行中的另一个项目下 。
注意上面的div＃3是如何在div＃1下面包装的，创build一个新的行。 它不能包装在div＃2下面。
结果，当物品不是最高的时候，空白仍然存在，造成难看的差距。
图片来源： Jefree Sujit
column wrap解决scheme
如果切换到flex-flow: column wrap ，flex项目将垂直堆叠，并且更容易实现网格布局。 但是，列方向的容器有三个潜在的问题：
- 它水平扩展容器，而不是垂直（如Pinterest布局）。
- 它要求容器有一个固定的高度，所以项目知道在哪里包装。
- 在撰写本文时，在所有主要浏览器中，容器不能扩展以容纳其他列的缺陷。
结果，在许多情况下，列方向容器可能是不可行的。
其他解决scheme
-
添加容器
在上面的第一个图像中，考虑将项目2和3包装在单独的容器中。 这个新的容器成为项目1的兄弟姐妹。完成。
值得强调的一个缺点：如果您想要使用
order属性来重新排列媒体查询中的布局，则此方法可能会消除该选项。 -
Desandro砌体
砌体是一个JavaScript网格布局库。 它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像镶嵌在墙上的石匠。
来源： http : //masonry.desandro.com/
-
如何build立一个像Pinterest一样工作的网站
Pinterest的确是一个很酷的网站，但是我觉得有趣的是这些插件是如何布置的…所以本教程的目的是重新创build这个响应块效果。
来源： https ： //benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html
-
CSS网格布局模块1级
这个CSS模块定义了一个二维的基于网格的布局系统，为用户界面devise进行了优化。 在网格布局模型中，网格容器的子节点可以定位到预定义的灵活或固定大小的布局网格中的任意槽中。
来源： https ： //drafts.csswg.org/css-grid/
你想要什么可以用3种方式实现，CSS明智的：
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列
（该解决scheme具有内置column-span的非常好的优点 – 对于标题非常方便）。 缺点是在列中sorting项目（第一列包含项目的前三分之一等等）。 我为此做了一个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（砌体插件）计算渲染项目大小后的绝对定位。
如果通过vmin或vmax单位设置column-width并删除column-count （第一个代码段），则display:grid和vmin也是未来（第二个代码段）的选项， column方法似乎是一个很好的折衷scheme。
从@Lanti的答案启发片段。
用vmin进行testing演示
.container { } ul { margin: 0; padding: 0; } ul li { list-style: none; font-size: 0; } .portfolio ul { -webkit-column-width:50vmin; -moz-column-width:50vmin; column-width:50vmin; -webkit-column-fill:balance; -moz-column-fill:balance; column-fill:balance; -webkit-column-gap: 3px; -moz-column-gap: 3px; column-gap: 3px; } .portfolio ul:hover img { opacity: 0.3; } .portfolio ul:hover img:hover { opacity: 1; } .portfolio ul li { margin-bottom: 3px; } .portfolio ul li img { max-width: 100%; transition: 0.8s opacity; }
<section class="container portfolio"> <ul> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li> </ul> </section>
您可以根据屏幕截图来实现砌体效果，但是您已经dynamic设置了外部div的高度
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .item-list { max-width: 400px; border: 1px solid red; display: -ms-flexbox; -ms-flex-direction: column; -ms-flex-wrap: wrap; display: flex; flex-direction: column; flex-wrap: wrap; height: 100vw; } .item-list__item { border: 1px solid green; width: 50%; }
<div class="item-list" > <div class="item-list__item"> Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits county enough the figure former add. Do sang my he next mr soon. It merely waited do unable. </div> <div class="item-list__item"> Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. </div> <div class="item-list__item"> Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits </div> <div class="item-list__item"> Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. </div> <div class="item-list__item"> Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits </div> </div>
我build议使用这样的网格列 ，而不是flexbox 。 正如你所看到的，底部图像的间距可以更好，但对于原生的CSS解决scheme，我认为它是相当整洁的。 没有更多的JS：
.container { max-width: 900px; width: 100%; margin: 0 auto; } ul { margin: 0; padding: 0; } ul li { list-style: none; font-size: 0; } .portfolio ul { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; -moz-column-gap: 3px; -webkit-column-gap: 3px; column-gap: 3px; } .portfolio ul:hover img { opacity: 0.3; } .portfolio ul:hover img:hover { opacity: 1; } .portfolio ul li { margin-bottom: 3px; } .portfolio ul li img { max-width: 100%; transition: 0.8s opacity; }
<section class="container portfolio"> <ul> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li> </ul> </section>
