弹性物品是否可以与上方物品紧密对齐？

71

实际上，这是Pinterest布局。但是，在线找到的解决方案包装在圆柱中，这意味着容器在不经意间会水平增长。那不是Pinterest布局，它不适用于动态加载的内容。

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

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

javascript  css  flexbox  pinterest 
— Guybrush Threepwood
source
尚不清楚元素的顺序应该是什么，这很重要。你能给他们加数字吗？
— tao 2015年
我虽然说过，但这可能会限制可能的答案。我确实知道前三名从左到右是1、2、3，但是我真的不在乎4是放在1、2还是3以下。（如果以垂直放置为标准，则应该在3以下;如果为水平放置，则应低于1。）一切正常！
— Guybrush Threepwood
4
没有Flexbox的是不是这个布局，你应该使用砖石或在最坏的情况下CSS列，它类似于我的回答对这个问题，以便它可以帮助你很好的解决stackoverflow.com/questions/34417059/...
— 雷纳德Vracar区
3
— Paulie_D
1
晚会晚了一点，这是answer to a similar questionPinterest脚本的作者，Pinterest的联合创始人Evan Sharp撰写的，解释了逻辑。
— 陶

Answers:

43

Flexbox是一种“一维”布局系统：它可以沿水平或垂直线对齐项目。

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

这就是为什么flexbox构建网格的能力有限的原因。这也是W3C开发了另一种CSS3技术（网格布局）的原因（请参见下文）。

在带有flex的容器中flex-flow: row wrap，flex项必须包装到新行。

这意味着弹性项目不能包装在同一行中的另一个项目之下。

在此处输入图片说明

请注意上面的div＃3如何在div＃1之下包装，从而创建新行。它不能包裹在div＃2下。

因此，当项目不是该行中最高的项目时，将保留空白，从而造成难看的空隙。

在此处输入图片说明

在此处输入图片说明

图片来源：Jefree Sujit

column wrap 解

如果切换到flex-flow: column wrap，则弹性项目将垂直堆叠，并且更容易获得网格状的布局。但是，列方向容器立即存在三个潜在问题：

  1. 它沿水平方向而不是垂直方向扩展容器（如Pinterest布局）。
  2. 它要求容器具有固定的高度，因此物品知道在哪里包装。
  3. 在撰写本文时，它在所有主流浏览器中都有一个缺陷，在该主流浏览器中，容器不会扩展以容纳其他列。

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

其他解决方案

— 迈克尔·本杰明
source
6

您可以通过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（砌体插件）计算渲染的物品尺寸后的绝对定位。

— tao
source
1
＃1在最新的Firefox上对我不起作用（我应该使用游乐场示例进行更新；它将这样做）。＃2实际上非常接近，需要解决一些问题，但是我知道它使用了新的CSS网格系统，该系统对浏览器的支持非常差。
— Guybrush Threepwood
您对＃1的看法是正确的。我无法使用flex使其工作。不确定“非常差的浏览器支持”是什么意思。你能给我指出一些数字吗？我认为＃2的问题少于5％的用户。如我错了请纠正我。
— tao 2015年
如果您查看“相对使用情况”统计信息，那么网格系统不受大量用户支持，因此它可能尚未投入生产。不过，这是一个很好的解决方案，谢谢。 caniuse.com/#search=grid
— Guybrush Threepwood
2
迷人。您能发现网格和列之间的任何区别吗？
— tao 2015年
1

该column方法似乎是一个不错的妥协，如果你设置column-width通过vmin或vmax单位和下降column-count（第一个片段），display:grid并且vmin也是未来的危机中（第二片段）的选项。

来自@Lanti答案的摘要。

用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;
}
<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>
展开摘要

其他链接https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

display:grid coud使自动填充也很容易，但是需要将跨度值设置为最高图像，以便行和列都可以填充

.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
}
<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>
展开摘要

您可以看到https://css-tricks.com/snippets/css/complete-guide-grid/

— 丙酸杆菌
source
第一个片段中的图像顺序是错误的，这就是按列排列的问题。但是第二个似乎很重要！真的很好
— Guybrush Threepwood
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>
展开摘要

— 大卫·切利（David Chelliah）
source
0

而不是flexbox，我建议将列用于此类网格。如您所见，底部图像的间距可能会更好，但是对于本机CSS解决方案，我认为它非常整洁。没有更多的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>
展开摘要

— 兰蒂
source
看起来不错，但是元素的顺序是错误的。最具挑战性的部分是将元素水平放置，然后垂直包裹。
— Guybrush Threepwood
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.