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

Question

我有 2 张卡 Card.Sections。我试图将第二个对齐到最右边，但对我没有任何作用。我试过了：

将部分设置为 flex 并为第二个部分分配 marginLeft: auto
设置卡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.Section 之间插入一个具有剩余宽度的元素，从而将第二个 Card.Section 推到最后。

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

How to align Card.Section components in MS Fluent UI?

css

alignment

reactjs

fluent-ui