fr是CSS Grid中用于分配剩余空间的弹性单位，表示份数比例，常用于grid-template-columns或grid-template-rows；例如1fr 2fr 1fr将容器按1:2:1划分，第二列宽度为其他两列的两倍；可与px等固定单位混合使用，此时fr分配扣除固定宽度后的剩余空间；典型应用包括侧边栏固定主内容自适应、等分布局如repeat(3,1fr)，以及配合minmax实现响应式网格；fr仅在Grid布局中有效，且只作用于剩余空间。
在CSS中，并没有一个叫做 fraction 的独立属性或单位，但你可能是指 fr 单位，它是“fraction”的缩写，中文意思是“份数”。fr 是 CSS Grid 布局中用于分配可用空间的一个弹性单位。
fr 用来表示网格容器中剩余空间的分配比例。它只在 grid-template-columns 或 grid-template-rows 中使用，适用于 CSS Grid 布局。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
这表示将容器分为三列：第一列占 1 份，第二列占 2 份，第三列占 1 份，总共 4 份。因此第二列的宽度是其他两列的两倍。
你可以将 fr 和固定单位（如 px、rem）一起使用。此时，fr 分配的是去除固定尺寸部分后的剩余空间。
立即学习“前端免费学习笔记（深入）”；
例如：
.container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
}
第一列固定为 100px，剩下的宽度被分为 3 份：第二列占 1 份，第三列占 2 份。
grid-template-columns: repeat(3, 1fr) 创建三等分列。minmax() 使用，例如：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，让每列最小 200px，多余空间平均分配。基本上就这些。fr 单位让网格布局的空间分配变得非常灵活和直观。不复杂但容易忽略的是：它只作用于剩余空间，且不能用于非 Grid 布局中。
以上就是css中fraction如何使用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
705
收藏
取消收藏
