如何在flex中正确对齐？

Question

在我的反应styled-component中，我有一个Flex组件，其中有几个孩子和一个单独的组件：

<Flex align="center" justify="flex-end" flex="1 0 auto" px={[12, 18]}>
  {children}
  <AlertBell path={pathname} />
</Flex>

我正在尝试将子级和AlertBell组件向右对齐。但是，当我向AlertBell添加更多边距时，子代不会向左移动。即使增加AlertBell中的边距，我如何也可以正确对齐元素？

Answer 1

所需语法略有不同：

<Flex alignItems="center" justifyContent="flex-end" flex="1 0 auto" px={[12, 18]}>
    {children}
    <AlertBell path={pathname} />
</Flex>

alignItems="center"也是当前版本中的默认设置。 flex道具不需要此项，因为它适用于包装器本身。