css - 相当于 fr(分数)单位的 Flexbox

Question

fr 最好的比喻是什么？ flexbox 布局中的(分数)单元？我在想 flex: 1但不确定它在增长/收缩行为方面是否是最佳匹配。
我想要做的是为网格布局做一个后备，以便它在 IE11 中工作。我有一个网格声明 grid-template-columns: 11.25rem 1fr;我无法在 IE 中工作(即使使用自动前缀添加 -ms-grid-columns 列仍然堆叠在一起)。
所以我想也许只是使用这样的东西在 IE 的 flexbox 中实现它:

.container {
  max-width: 46rem;

  .parent {
    display: flex;

    & :first-child {
      inline-size: 11.25rem;
    }

    & :last-child {
      flex: 1;
    }
  }
}

Answer 1

原来flex: 1适合我的需要。

这是 flex: 1 1 0px; 的简写所以
flex-grow: 1当有额外空间时让它增长。flex-shrink: 1当没有足够的空间时让它收缩。flex-basis: 0px允许它具有由其内容相对于其容器宽度定义的宽度。