弹性项目是否可以与它们上方的项目紧密对齐？

IT技术 javascript css flexbox pinterest
2020-12-19 15:46:10

这实际上就是 Pinterest 布局。然而，网上找到的解决方案是用列包裹的，这意味着容器在不经意间横向增长。这不是Pinterest 布局，它不适用于动态加载的内容。

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

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

5个回答

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

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

这就是 flexbox 构建网格的能力有限的原因。这也是W3C开发另一种 CSS3 技术Grid Layout（见下文）的原因。

在带有 的弹性容器中flex-flow: row wrap，弹性项目必须换行到新行。

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

在此处输入图片说明

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

因此，当项目不是行中最高的时，空白区域会保留，从而产生难看的间隙。

在此处输入图片说明

在此处输入图片说明

图片来源：Jefree Sujit

column wrap 解决方案

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

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

因此，列向容器在许多情况下可能不可行。

其他解决方案

你想要的可以通过3 2 种方式实现，CSS 明智的：

1.弹性盒：

    .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（砌体插件）计算渲染项目大小后的绝对定位。

迷人。你能发现网格和列之间的任何区别吗？
2021-02-12 15:46:10
你是对的#1。我无法使用 flex 使其工作。不确定“非常糟糕的浏览器支持”是什么意思。你能指点我一些数字吗？我认为 #2 对不到 5% 的用户有问题。如果我错了纠正我。
2021-02-21 15:46:10
#1 在最新的 Firefox 上对我不起作用（我应该用操场示例进行更新；会这样做）。#2 实际上非常接近一些需要解决的怪癖，但我知道它使用了浏览器支持非常差的新 CSS 网格系统。
2021-02-22 15:46:10
如果您查看使用相对统计信息，就会发现网格系统不受大量用户的支持，因此它可能尚未准备好投入生产。不过，这是一个很好的解决方案，谢谢。 caniuse.com/#search=grid
2021-03-04 15:46:10

column如果您设置column-widthviavmin或vmaxunits and drop column-count(first snippet) ，该方法似乎是一个很好的折衷方案，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 可以通过自动填充使其也很容易，但需要将跨度值设置为最高图像，以便行和列可以叠加

.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/

第一个片段中的图像顺序错误，这是按列排列的问题。但第二个似乎很重要！非常好
2021-02-14 15:46:10

您可以根据屏幕截图实现砌体效果，但您已经动态设置了外部 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>
展开片段

而不是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>
展开片段

看起来不错，但是元素的顺序是错误的。具有挑战性的部分是水平布置元素，然后垂直包裹。
2021-02-09 15:46:10
其它你可能感兴趣的问题
上一篇为什么 setTimeout(fn, 0) 有时有用？ 下一篇如何将数字格式化为货币字符串