css中fraction如何使用

有志者，事竟成！如果你在学习文章，那么本文《css中fraction如何使用》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

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 单位的基本作用

fr 用来表示网格容器中剩余空间的分配比例。它只在 grid-template-columns 或 grid-template-rows 中使用，适用于 CSS Grid 布局。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

这表示将容器分为三列：第一列占 1 份，第二列占 2 份，第三列占 1 份，总共 4 份。因此第二列的宽度是其他两列的两倍。

fr 与其他单位混合使用

你可以将 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 布局中。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。