带徽章的列表组
在这个食谱中，我们将创建一个带徽章的列表组模式，徽章指示计数。
要求
列表项应与徽章一起显示。徽章应右对齐并垂直居中。徽章必须垂直居中，无论内容是单行还是多行文本。
食谱
选择
Flexbox 使此特定模式变得简单，也有助于更改布局。
为了确保文本和徽章正确对齐，我使用 justify-content 属性，其值为 space-between。这会在项目之间放置任何额外的空间。在实时示例中，如果您删除此属性，您将看到徽章会移动到文本较短的项目的文本末尾，这些项目的文本少于一行。
为了水平对齐内容，我使用 align-items 属性来对齐文本和徽章在交叉轴上的位置。如果您希望徽章对齐到内容的顶部，请将其更改为 align-items: flex-start。