增加内容的元素宽度，否则增加宽度-CSS

Question

我试图在Angular 7的mat-button-toggle中使用多个mat-button-toggle-group来制作评分组件。我设法使用以下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>