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

【问题标题】：How to align Card.Section components in MS Fluent UI?如何在 MS Fluent UI 中对齐 Card.Section 组件？
【发布时间】：2020-07-24 03:02:18
【问题描述】：

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

将部分设置为flex 并将marginLeft: auto 分配给第二个
设置卡position: relative，然后将float: right添加到第二张

【问题讨论】：

标签： css reactjs alignment fluent-ui

【解决方案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 推到末尾。

【讨论】：

嘿，它有效！你是怎么发现的？我找到了docs.microsoft.com/en-us/javascript/api/office-ui-fabric-react/…，但根据描述，这是其他一些属性……这是用于堆栈，而不是卡片。我在developer.microsoft.com/en-us/fluentui#/controls/web/card 上也找不到。是的，列出了“成长”，但没有描述，我在他们的网站上看不到任何进一步的参考链接。
@VIPPER 我实际上以一种奇怪的方式发现了这一点。我注意到文档中的垂直卡片示例末尾有最后一个card.section，所以我查看了它的代码并发现了这一点。 developer.microsoft.com/en-us/fluentui#/controls/web/card.