列换行解决方案如果您切换到 flex-flow: column wrap,弹性项目将垂直堆叠并且更容易实现类似网格的布局.但是,列方向容器立即存在三个潜在问题:它水平扩展容器,而不是垂直扩展(如 Pinterest 布局).它要求容器具有固定的高度,以便物品知道要包装的位置.在撰写本文时,它在所有主要浏览器中都存在缺陷,其中容器无法扩展以容纳额外的列.因此,列向容器在许多情况下可能不可行.其他解决方案添加容器在上面的前两张图片中,考虑将第 2 项和第 3 项包装在一个单独的容器中.这个新容器可以是项目 1 的同级.完成.这是一个详细的例子:使用 flexbox 的计算器键盘布局一个值得强调的缺点:如果您想使用 order 属性来重新排列布局(例如在媒体查询中),此方法可能会消除该选项.德桑德罗砌体Masonry 是一个 JavaScript 网格布局库.它通过根据可用将元素放置在最佳位置来工作垂直空间,有点像石匠在墙上安装石头.如何建立一个像 Pinterest 一样运作的网站[Pinterest] 确实是一个很酷的网站,但我觉得有趣的是这些插板是如何布局的...所以本教程的目的是自己重新创建这种响应式块效果...CSS 网格布局模块级别 1这个 CSS 模块定义了一个基于二维网格的布局系统,针对用户界面设计进行了优化.在网格布局模型中,网格容器的子项可以放置在预定义的灵活或固定大小的布局网格中的任意槽中.网格布局示例:仅 CSS 砌体布局,但元素水平排列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 a "1-dimensional" layout system: It can align items along horizontal OR vertical lines.A true grid system is "2-dimensional": It can align items along horizontal AND vertical lines. In other words, cells can span across columns and rows, which flexbox cannot do.This is why flexbox has a limited capacity for building grids. It's also a reason why the W3C has developed another CSS3 technology, Grid Layout (see below).In a flex container with flex-flow: row wrap, flex items must wrap to new rows.This means that a flex item cannot wrap under another item in the same row.Notice above how div #3 wraps below div #1, creating a new row. It cannot wrap beneath div #2.As a result, when items aren't the tallest in the row, white space remains, creating unsightly gaps.column wrap SolutionIf you switch to flex-flow: column wrap, flex items will stack vertically and a grid-like layout is more attainable. However, a column-direction container has three potential problems right off the bat:It expands the container horizontally, not vertically (like the Pinterest layout).It requires the container to have a fixed height, so the items know where to wrap.As of this writing, it has a deficiency in all major browsers where the container doesn't expand to accommodate additional columns.As a result, a column-direction container may not be feasible in many cases.Other SolutionsAdd containersIn the first two images above, consider wrapping items 2 and 3 in a separate container. This new container can be a sibling to item 1. Done.Here's a detailed example: Calculator keypad layout with flexboxOne downside worth highlighting: If you're wanting to use the order property to re-arrange your layout (such as in media queries), this method may eliminate that option.Desandro Masonry 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.How to Build a Site that Works Like Pinterest [Pinterest] really is a cool site, but what I find interesting is how these pinboards are laid out... So the purpose of this tutorial is to re-create this responsive block effect ourselves...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.Grid Layout example: CSS-only masonry layout but with elements ordered horizontally 这篇关于弹性项目是否可以与它们上方的项目紧密对齐?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
08-26 16:46
查看更多