关于前端:介绍CSS中的长度单位fr

简介

在 CSS Grid 网格布局中，引入了一种新的长度单位 fr(fraction)。它示意 Grid 布局中中残余空间 (leftover space) 的一部分 (fraction)。
一般来说 1fr 的意思是“100% 的残余空间”, .25fr 意味着“25% 的残余空间”。过后当 fr 大于 1 的时候，则会从新计算比例来调配。咱们能够看上面的具体例子。

用法

1. 均分残余空间

首先咱们先建设如下的网格布局

<div class="grid-container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
</div>

而后将 ABCD 四块进行均分，咱们能够用 grid-template-columns: repeat(4, 1fr) 这里的和 grid-template-columns: repeat(4, .25fr) 成果是一样的。.25 来自于 100%/4=25%。

个别都倡议应用 fr>=1 的状况, 比如说 1fr 2fr 就比 .33fr .67fr 可读性更强。

实现成果如下：

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 10px;
}

2. 和其余单位混合应用

在 grid 布局中，有时候咱们须要固定某些列的长度，能够用以下办法，这里 A 和 D 都是固定的 50px，C 是占总宽度的 20%，残余空间就能够调配给 B。
这种状况，在设计响应式布局的时候十分有用。

.grid-container {
  grid-template-columns: 50px 1fr 20% 50px;
  column-gap: 10px;
}