Flexbox类比分数单位。

Question

什么是最好的比喻？Fr在Flexbox的布局中，我在想的是 flex: 1 但不知道它是否是最佳匹配的增长和收缩行为。

我想做的是为网格布局做一个后备，使它能在IE11中工作。grid-template-columns: 11.25rem 1fr; 我无法在IE中工作（即使使用自动前缀程序，添加了 -ms-grid-columns 列仍然是相互堆叠的）。)

所以我在想，也许就用这样的方式在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 允许它的宽度由其内容相对于容器的宽度来定义。