相当于 fr（分数）单位的 Flexbox

Question

frflexbox 布局中（分数）单元的最佳类比是什么？我在考虑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;so的简写

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