Html 仅CSS砌体布局
我需要实施一个相当普通的砖石布局。然而,出于一些原因,我不想使用JavaScript来实现这一点 参数:Html 仅CSS砌体布局,html,css,flexbox,css-grid,Html,Css,Flexbox,Css Grid,我需要实施一个相当普通的砖石布局。然而,出于一些原因,我不想使用JavaScript来实现这一点 参数: 所有元素都具有相同的宽度 元素的高度无法在服务器端计算(图像加上各种数量的文本) 如果有必要,我可以接受固定数量的栏目 有一个简单的解决方案可以在现代浏览器中使用 该解决方案的问题在于元素按列排序: 虽然我需要元素按行排序,但至少大约: 我尝试过的不起作用的方法: 使项目显示:内联块 使项目浮动:左: 现在,我可以更改服务器端呈现并重新排序项目,将项目数除以列数,但这很复杂,容
- 所有元素都具有相同的宽度
- 元素的高度无法在服务器端计算(图像加上各种数量的文本)
- 如果有必要,我可以接受固定数量的栏目
- 使项目显示:内联块
- 使项目浮动:左:
砌体
功能
代码如下所示:
grid-template-rows: masonry
grid-template-columns: masonry
截至2021年3月,它仅在Firefox中可用(激活标志后)
柔性箱 flexbox不可能实现动态砌石布局,至少不能以干净高效的方式实现 Flexbox是一个一维布局系统。这意味着它可以沿水平线或垂直线对齐项目。弹性项仅限于其行或列 真正的网格系统是二维的,这意味着它可以沿水平线和垂直线对齐项目。内容项可以同时跨行和跨列,而flex项不能做到这一点 这就是为什么flexbox构建网格的能力有限。这也是W3C开发另一种CSS3技术的原因
行换行
在具有flex flow:row wrap
的flex容器中,flex项必须换行到新行
这意味着弹性项目不能包装在同一行的另一个项目下
请注意上面的div#3如何在div#1下面换行,从而创建一个新行。它不能在div#2下面包装
因此,当项目不是行中最高的项目时,会保留空白,从而产生难看的间隙
列换行
如果切换到flex-flow:column-wrap
,则更容易获得类似网格的布局。但是,列方向容器有四个潜在问题:
未定义项目维度的CSS网格 如果可以预先确定内容项的不同高度,网格布局将是解决问题的完美方案。所有其他要求都在电网的能力范围内 网格项目的宽度和高度必须已知,以便与周围项目闭合间隙 所以网格,这是CSS为构建水平流动的砖石布局所提供的最好的工具,在这种情况下是不够的 事实上,在CSS技术能够自动填补空白之前,CSS通常没有解决方案。像这样的事情可能需要对文档进行回流,因此我不确定它会有多有用或效率 你需要一个脚本 JavaScript解决方案倾向于使用绝对定位,它从文档流中删除内容项,以便重新排列它们,而不留空隙。以下是两个例子:
定义了项目维度的CSS网格 对于已知内容项宽度和高度的布局,这里是纯CSS中的水平流动砖石布局:
网格容器{
显示:网格;/*1*/
网格自动行:50px;/*2*/
栅极间隙:10px;/*3*/
网格模板列:重复(自动填充,最小值(30%,1fr));/*4*/
}
[简短]{
网格行:跨度1;/*5*/
背景颜色:绿色;
}
[高]{
网格行:跨度2;
背景颜色:深红色;
}
[更高]{
网格行:跨度3;
背景颜色:蓝色;
}
[最高的]{
网格行:跨度4;
背景颜色:灰色;
}
网格项{
显示器:flex;
对齐项目:居中;
证明内容:中心;
字体大小:1.3em;
字体大小:粗体;
颜色:白色;
}
01
02
03
04
05
06
07
08
09
10
等
这是最近发现的涉及flexbox的技术:
这篇文章对我来说很有意义,但我还没有尝试使用它,所以除了Michael的回答中提到的以外,我不知道是否还有其他警告
下面是本文中的一个示例,它使用了order
属性,并结合了:n个child
堆栈片段
.container{
显示器:flex;
柔性流:柱包裹;
排列