javascript - 随内容增加元素宽度，否则宽度相等 - CSS

Question

我正在尝试在 Angular 7 的 mat-button-toggle-group 中使用多个 mat-button-toggle 制作评级组件。我设法制作了它们使用以下 CSS 等宽:

mat-button-toggle {
    width:100%
}

mat-button-toggle-group {
    width: 100%;
}

所以，这就是正常情况下的样子，宽度相等。

        1        |        2        |        3        |        4        |        5        |

现在，该应用经过编码，因此第一个和最后一个切换可以包含可选的描述性文本，以帮助用户了解评级的等级。

但是，使用上面的 CSS，它为所有个人评分保持 20% 的宽度。我尝试了 width="auto"，虽然这会根据内部文本改变宽度，但所有其他切换按钮都变得非常薄，在切换组的右端留下一个大的空白区域。 例如:

Worst 1 | 2 | 3 | 4 | 5 Best

是否可以保持相同的宽度，但在向第一个和最后一个元素添加文本时，通过减少中间元素的宽度来增加它们的宽度？

期望的最终输出:

   Worst Option possible    1    |   2   |   3   |   4   |    5  Best  Option possible  |

谢谢。

Answer 1

使用flex

.options {
  display: flex;
}

.options > div {
  flex: 1;
  border: 1px solid gray;
  text-align: center;
}

<div class='options'>
  <div>1 WORST</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6 BEST</div>
</div>