CSS中长度单位fr

时间：2023-03-28 13:13:38 HTML

简介在CSSGrid网格布局中，引入了一个新的长度单位fr（分数）。它代表网格布局中剩余空间的一小部分。通常1fr表示“100%可用空间”，.25fr表示“25%可用空间”。当fr大于1时，会重新计算比例分配。我们可以看到下面的详细示例。用法1.将剩余空间平分首先我们先创建如下网格布局A

然后把ABCD四等分，我们可以用grid-template-columns：这里的repeat(4,1fr)与grid-template-columns:repeat(4,.25fr)相同。.25来自100%/4=25%。一般推荐使用fr>=1，比如1fr2fr比.33fr.67fr可读性更好。效果如下：.grid-container{display:grid;网格模板列：重复（4、1fr）；column-gap:10px;}2.在网格布局中与其他单元混合，有时我们需要固定一些列的长度可以使用如下方式，这里A和D都固定为50px，C为20%总宽度的一部分，剩余的空间可以分配给B。这种情况在设计响应式布局时非常有用。.grid-container{grid-template-columns:50px1fr20%50px;列间距：10px；}

上一篇：Fabric.js使用纯色来遮挡画布（前景色）

下一篇：另一个错误？Safari文字和省略号重叠的问题

CSS中长度单位fr相关文章