柔性物品是否可以与其上方的物品紧密对齐？
这实际上是Pinterest布局。但是，在线发现的解决方案包含在列中，这意味着容器无意中水平生长。这是不 Pinterest布局，并且它不适用于动态加载的内容。
我想要做的是有一堆固定宽度和不对称高度的图像，水平放置但在满足固定宽度容器的限制时换行换行：
flexbox可以做到这一点，还是我必须求助于像Masonry这样的JS解决方案？
5 个答案:
答案 0 :(得分：34)
Flexbox是一个＆＃34; 1维＆＃34;布局系统：它可以沿水平或垂直线对齐项目。
真正的网格系统是＆＃34; 2维＆＃34;：它可以沿水平和垂直线对齐项目。换句话说，单元格可以跨越列和行，而flexbox不能这样做。
这就是Flexbox构建网格的能力有限的原因。这也是W3C开发另一种CSS3技术网格布局（见下文）的原因。
在具有flex-flow: row wrap的Flex容器中，flex项目必须换行到新的行。
这意味着 一个弹性项目无法包装在同一行的另一个项目 。
注意上面 div＃3 如何包装 div＃1 ，创建一个新行。它不能包裹在 div＃2 下面。
因此，当物品不是行中最高的物品时，空白区域仍然存在，从而产生难看的间隙。
图片来源：Jefree Sujit
column wrap解决方案
如果切换到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项的兄弟。完成。
以下是一个详细示例：Calculator keypad layout with flexbox
值得强调的一个缺点是：如果您想要使用
< / LI>order属性重新排列布局（例如在媒体查询中），此方法可能会取消该选项。 -
Masonry是一个JavaScript网格布局库。它 基于可用的元素将元素放置在最佳位置 垂直空间，有点像石匠在墙上贴石头。
-
How to Build a Site that Works Like Pinterest
[Pinterest]真的是一个很酷的网站，但我觉得有趣的是这些拼图是如何布局的...所以本教程的目的是重新创建这个响应块效果...
来源：https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html
-
CSS Grid Layout Module Level 1
此CSS模块定义了一个基于网格的二维布局系统，针对用户界面设计进行了优化。在网格布局模型中，网格容器的子节点可以放置在预定义的灵活或固定大小的布局网格中的任意插槽中。
网格布局示例：CSS-only masonry layout but with elements ordered horizontally
因此，在许多情况下，列方向容器可能不可行。
其他解决方案
答案 1 :(得分：4)
你想要的是 3 2种方式，CSS明智：
1。 <击> Flexbox的：
<击> .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;
}
<击>
2。 CSS列
（这个解决方案具有内置column-span非常简洁的优点 - 非常方便标题。缺点是在列中排序项目（第一列包含项目的前三分之一，依此类推......）。我为此做了一个jsFiddle。
"provisioners": [
{
"execute_command": "echo 'vagrant'|sudo -S sh '{{.Path}}'",
"override": {
"virtualbox-iso": {
"scripts": [
"scripts/base.sh",
"scripts/system.sh",
"scripts/vagrant.sh",
"scripts/python.sh",
"scripts/virtualbox.sh",
"scripts/docker.sh",
"scripts/test-perso.sh",
"scripts/cleanup.sh"
]
}
},
"type": "shell"
}
]
3。砌体插件
通过JavaScript（砌体插件）计算渲染项目大小后的绝对定位。
答案 2 :(得分：1)
column或column-width单位设置vmin并删除vmax（第一个代码段），{{1> column-count方法似乎是一个很好的折衷方案}}和display:grid也是未来的选项（第二个片段）。
摘自@Lanti回答。
使用vmin进行测试演示
vmin.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;
}
其他https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
之间的链接 <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>使用自动填充功能也很容易，但需要将跨度值设置为最高图像，以便行和列可以嵌入
display:grid.container {}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
font-size: 0;
}
.portfolio ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50vmin, 1fr));
grid-gap: 5px;
grid-auto-rows: minmax(10px, 1fr);
grid-auto-flow: dense;
}
.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;
}
li {
border: solid blue;
grid-row-end: span 1;
display: flex;
align-items: center;
background: lightgray;
}
li:nth-child(1),
li:nth-child(3),
li:nth-child(6),
li:nth-child(7),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(11) {
border: solid red;
grid-row-end: span 2
}
您可以看到https://css-tricks.com/snippets/css/complete-guide-grid/
答案 3 :(得分：0)
您可以根据屏幕截图实现砌体效果，但您已动态设置外部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>
答案 4 :(得分：0)
我建议使用columns代替flexbox而不是.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;
}。如您所见，底部图像的间距可以更好，但对于原生CSS解决方案，我认为它非常整洁。没有更多JS：
<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>.gitmodules
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？