Flexbox容器中包装成行的项目是否有可能与它们之上的项目紧密对齐？ [英] Is it possible for the items in a flexbox container that wraps in rows to align tightly to the items above them?

问题描述

这是，实际上，Pinterest的布局。然而，在线找到的解决方案包裹在列中，这意味着容器无意中水平生长。这是不 Pinterest布局，它不能很好地与动态加载的内容。

This is, in effect, the Pinterest layout. However, the solutions found online are wrapped in columns, which means the container inadvertently grows horizontally. That is not the Pinterest layout, and it does not work well with dynamically-loaded content.

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

What I want to do is have a bunch of images of fixed width and asymmetrical height, laid out horizontally but wrapping in a new row when the limits of the fixed-width container are met:

可以使用flexbox做到这一点，还是必须使用像Masonry这样的JS解决方案？

Can flexbox do this, or do I have to resort to a JS solution like Masonry?

推荐答案

Flexbox不是网格系统。

Flexbox is not a grid system.

使用 flex-direction：row 和 flex-wrap：wrap ，flex项目可以在行 中换行。

With flex-direction: row and flex-wrap: wrap, flex items can wrap in rows.

这意味着单个flex项目不会将其定位调整为其上方项目的高度。这不会是一个行，这将是一个网格，flex项目被限制在一个直线，unbending行。

This means that an individual flex item will not adjust its positioning to the height of the item directly above it. That wouldn't be a row, that would be a grid, and flex items are confined to a straight, unbending row.

因此，由不是行中最高的项目创建的空白区域保留在每一列中。

Hence, white space created by items that aren't the tallest in the row is preserved in each column.

^{图片提供： Jefree Sujit}

退出他们的行为了关闭差距–也许与绝对定位–

For your desired layout to work, flex items would have to exit their row in order to close the gap – maybe with absolute positioning – which flexbox cannot do.

如果切换到 flex-direction：column ，flex项目将垂直堆叠，网格状布局是可以实现的。

If you switch to flex-direction: column, flex items will stack vertically and your grid-like layout is more attainable.

但是，这扩展了容器水平，而不是垂直（像Pinterest布局）。因此，在这种情况下，列方向弹性容器不工作。

However, this expands the container horizontally, not vertically (like the Pinterest layout). Hence, a column-direction flex container doesn't work in this case.

还要记住，列方向当前在所有主要浏览器中都有一个根本问题， a href =http://stackoverflow.com/q/33891709/3597276>容器不会展开以容纳其他列。

Also keep in mind that column-direction currently has a fundamental problem in all major browsers where the container doesn't expand to accommodate additional columns.

考虑以下替代方案：（第二个选项主要是FYI，因为大多数浏览器尚未完成实施。）

Consider the following alternatives: (The second option is mostly FYI, as most browsers haven't completed implementation.)

• Desandro Masonry

Masonry是一个JavaScript网格布局库。它
通过将元素放置在基于可用的
垂直空间的最佳位置来工作，类似于在墙上的石匠配合石头。

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

^{source： http://masonry.desandro.com/}

CSS网格布局模块级别1

此CSS模块定义了一个基于网格的二维布局系统， 。在网格布局模型中，网格容器的子项可以定位到预定义的灵活或固定大小布局网格中的任意位置。

This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

^{来源： https://drafts.c​​sswg.org/css-grid/}

相关文章：使用flex order属性重新排列桌面和移动视图的项目

这篇关于Flexbox容器中包装成行的项目是否有可能与它们之上的项目紧密对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！