实际上，这是Pinterest布局 . 但是，在线发现的解决方案包含在列中，这意味着容器无意中水平生长 . 这是Pinterest布局的 not ，它对动态加载的内容不起作用 .

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

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

5 回答

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

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

这就是Flexbox构建网格的能力有限的原因 . 这也是为什么W3C开发了另一种CSS3技术 Grid Layout （见下文）的原因 .

在具有 flex-flow: row wrap 的Flex容器中，flex项必须换行到新行 .

这意味着 a flex item cannot wrap under another item in the same row .

注意上面div＃3如何包装在div＃1下面，创建一个新行 . 它不能包裹在div＃2下面 .

因此，当物品不是行中最高的时，空白区域仍然存在，从而产生难看的间隙 .

图片来源：Jefree Sujit

列包装解决方案

如果切换到 flex-flow: column wrap ，弹性项目将垂直堆叠，并且更容易获得类似网格的布局 . 但是，列方向容器有三个潜在的问题：
- 它水平扩展容器，而不是垂直扩展容器（如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 .
结果，在许多情况下，列方向容器可能不可行 .

其他解决方案
- Add containers
在上面的前两张图片中，考虑将项目2和3包装在一个单独的容器中 . 这个新容器可以是第1项的兄弟 . 完成 .

这是一个详细的例子：Calculator keypad layout with flexbox

一个值得强调的缺点：如果您想使用 order 属性重新排列布局（例如在媒体查询中），此方法可能会消除该选项 .
- Desandro Masonry
Masonry是一个JavaScript网格布局库 . 它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像石膏在墙上贴合石头 . 来源：http：//masonry.desandro.com/
- 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模块定义了一个基于网格的二维布局系统，针对用户界面设计进行了优化 . 在网格布局模型中，网格容器的子节点可以定位在预定义的灵活或固定大小的布局网格中的任意插槽中 . 来源：https：//drafts.csswg.org/css-grid/

网格布局示例：CSS-only masonry layout but with elements ordered horizontally
回复于 2024-05-18T15:36:05+08:00

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

1. flexbox：

.parent {
显示：flex;
弯曲方向：柱;
flex-wrap：wrap;
max-width： / 通常为100％，在相对容器中 /
min-height：; / *我在这里使用vh * /
}
.child {
width：;
显示：块;
}

2. CSS列

（这个解决方案具有内置column-span非常简洁的优点 - 非常方便 Headers ） . 缺点是在列中排序项目（第一列包含项目的前三分之一，依此类推......） . 我为此做了一个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（砌体插件）计算渲染项目大小后的绝对定位 .

回复于 2024-05-18T15:36:05+08:00

如果您通过 vmin 或 vmax 单位设置 column-width 并且删除 column-count （第一个片段），则 column 方法似乎是一个很好的折衷方案， display:grid 和 vmin 也是futur（第二个片段）的选项 .

片段灵感来自@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使自动填充也很容易，但需要将 Span 值设置为最高的图像所以行和列可以叠加

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

回复于 2024-05-18T15:36:05+08:00

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

回复于 2024-05-18T15:36:05+08:00

而不是 flexbox ，我建议使用columns这样的网格 . 如您所见，底部图像的间距可以更好，但对于原生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>

回复于 2024-05-18T15:36:05+08:00

柔性物品是否可以与其上方的物品紧密对齐？

5 回答

列包装解决方案

其他解决方案

1. flexbox：

2. CSS列

3.砌体插件

相关问题