栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

CSS网格布局中的等高行

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

CSS网格布局中的等高行

简短答案

如果目标是创建具有相等高度的行的网格,而网格中最高的单元格将设置所有行的高度,那么这是一种快速简单的解决方案:

  • 将容器设置为
    grid-auto-rows: 1fr

怎么运行的

网格布局提供了用于在网格容器中建立灵活长度的单元。这是

fr
单位。它旨在在容器中分配可用空间,并且有点类似于
flex-grow
flexbox中的属性。

如果将网格容器中的所有行都设置为

1fr
,则可以这样说:

grid-auto-rows: 1fr;

…那么所有行的高度将相等。

fr
即刻分配自由空间实际上并没有什么意义。而且,如果几行内容的高度不同,那么当空间分布时,某些行将成比例地变小和变高。

除了 这个深埋在网格规范中的小块:

7.2.3。 弹性长度:

fr
单位

如果可用空间是无限的(当网格容器的宽度或高度不确定时会发生这种情况),则将以flex-
size(

fr
)网格轨道的大小为其内容调整大小,同时保留其各自的比例。

通过确定

max-content
每个挠性尺寸的网格轨迹的尺寸并将该尺寸除以各自的挠性因子以确定“假设
1fr
尺寸”
,来计算每个挠性尺寸的网格轨迹的使用尺寸。

将这些最大值用作解析

1fr
长度(柔韧性分数),然后将其乘以每个网格轨迹的柔韧性因子以确定其最终大小。

因此,如果我正确地阅读了此内容,则在处理动态尺寸的网格(例如,高度不确定)时,网格轨迹(在这种情况下,行)的大小应与其内容相匹配。

每行的高度由最高(

max-content
)网格项确定。

这些行的最大高度变为的长度

1fr

这样便

1fr
可以在网格容器中创建等高的行。


为什么Flexbox不可行

正如问题所指出的,flexbox无法实现相等高度的行。

Flex项目在同一行上的高度可以相等,但不能跨多行。

此行为在flexbox规范中定义:

6.伸缩线

在多行伸缩容器中,每行的交叉大小是在行上包含伸缩项所需的最小大小。

换句话说,当基于行的伸缩容器中有多行时,每行的高度(“交叉尺寸”)是在该行上包含伸缩项所需的最小高度。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/400627.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号