css - 如何在 MS Fluent UI 中对齐 Card.Section 组件？

Question

我有带有 2 个 Card.Sections 的卡片。我正在尝试将第二个对齐到最右边，但是对我没有任何作用。我试过了：

1. 将部分设置为flex并分配marginLeft: auto给第二个

2. 设置 Card position: relative，然后添加float: right到第二个

Answer 1

我今天遇到了同样的问题，我是这样解决的：

<Card horizontal tokens={cardTokens}>
  <Card.Section>
    <Checkbox
      label="todo status"
    />
  </Card.Section>
  <Card.Item grow={1}>
    <span />
  </Card.Item>
  <Card.Section styles={footerCardSectionStyles}>
    <Icon iconName="Delete" />
  </Card.Section>
</Card>

如您所见，我使用了

 <Card.Item grow={1}>
   <span />
 </Card.Item>

在两个Card.Sections 之间，这是插入一个具有剩余宽度的元素，从而将第二个元素推Card.Section到末尾。