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布局，它不能很好地与动态加载内容。
我想做的是有一堆固定宽度和不对称高度的图像，水平布置，但在满足固定宽度容器的限制时包装在新行中：
flexbox可以做这个，还是我必须诉诸一个像Masonry这样的JS解决方案？
使用 flex-direction：row 和 flex-wrap：wrap ，flex项目可以在行 中换行。
这意味着单个flex项目不会将其位置调整到其正上方的项目的高度。这不是一个行，这将是一个网格，flex项目被限制在一个直线，unbending行。
因此，由不是行中最高的项目创建的空白空间会保留在每一列中。
图片提供： Jefree Sujit
退出他们的行为了关闭差距–也许与绝对定位–
如果您切换到 flex-direction：column ，flex项目将垂直堆叠，网格状布局是可以实现的。
但是，这将水平扩展容器，而不是垂直（像Pinterest布局）。因此，在这种情况下，列方向弹性容器不工作。
还要记住，列方向当前在所有主要浏览器中都有一个根本问题， a href =http://stackoverflow.com/q/33891709/3597276>容器不会展开以容纳其他列。
考虑以下替代方案：（第二个选项主要是FYI，因为大多数浏览器尚未完成实施。）
-
Masonry是一个JavaScript网格布局库。它
通过将元素放置在基于可用的
垂直空间的最佳位置来工作，类似于在墙上的石匠配合石头。您已经
可能已经在互联网上使用。
source： http://masonry.desandro.com/
-
此CSS模块定义了一个基于网格的二维布局系统， 。在网格布局模型中，网格容器的子项可以定位到预定义的灵活或固定大小布局网格中的任意位置。
来源： https://drafts.csswg.org/css-grid/
相关文章：使用flex order属性重新排列桌面和移动视图的项目
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:
Can flexbox do this, or do I have to resort to a JS solution like Masonry?
Flexbox is not a grid system.
With flex-direction: row and flex-wrap: wrap, flex items can wrap in rows.
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.
image credit: 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.
If you switch to flex-direction: column, flex items will stack vertically and your grid-like layout is more attainable.
However, this expands the container horizontally, not vertically (like the Pinterest layout). Hence, a column-direction flex container doesn't work in this case.
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.
Consider the following alternatives: (The second option is mostly FYI, as most browsers haven't completed implementation.)
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 Grid Layout Module Level 1
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.
Related post: Using flex order property to re-arrange items for desktop and mobile views
这篇关于Flexbox容器中包装成行的项目是否可以与其上面的项目紧密对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
