如何在一个Flexbox中将彼此上下对齐的项目对齐？

Question

我当前正在尝试将Number中的数字238,741和字母N对齐。目前，我在Prize Pool div和Number Active div之间有一个填充。它们全部包含在父对象中，显示设置为flex和flex-direction：列。然后，它们位于显示弯曲和方向设置为row的另一个父容器中。我尝试在div之间设置不同的填充，但是当我放大或缩小时它们不会保持其位置。

当放大或缩小或进入移动视图时，我无法弄清楚如何使其对齐并保持对齐。我花了7个小时在它上面，通过CSS技巧并没有取得什么进展。

代码：

  <Wrapper>
    <HeaderWrapper row alignItems="center">
      <PrizeText variant={TextVariant.subhead}>Prize Pool</PrizeText>
      <Text color={TextColor.primary} fontWeight="600" variant={TextVariant.subhead}>Number Active</Text>
      <GoldText style={{'padding-right': '26%'}} variant={TextVariant.display}>$7,162,245</GoldText>
      <GoldText color={TextColor.primary} variant={TextVariant.display}>238,741</GoldText>
    </HeaderWrapper>
  </Wrapper>

const HeaderWrapper = styled(Box)`
  height: auto;
  align-items: flex-start;
  /* border: 2px solid white; */
  flex-wrap: wrap;
  margin-top: 45px;
  margin-left: 32px;

`;
const MoneyWrapper = styled(Box)`
  height: auto;
  align-items: flex-start;
  /* border: 2px solid white; */
  flex-wrap: wrap;
  margin-left: 32px;

`;

const GoldText = styled(Text)`
  background-image: linear-gradient(98.84deg, #C9882B 0%, #E7CA66 47.71%, #C69935 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  white-space: nowrap;
`;

const PrizeText = styled(Text)`
  padding-right: 152px;
  color: ${props => props.theme.palette.text.primary};
  font-weight: 600;
  white-space: nowrap;
`;

const Wrapper = styled(Box)`
  position: relative;
  border: 2px solid white;
  width: 100%;
  /* justify-content: center; */
  align-items: center;
`;

Box只是一个div，其显示设置为flex，可以使用prop col或row更改flex方向。

Answer 1

重新考虑组件的结构可能会有所帮助。如果您将<PrizeText>和<GoldText>包裹在一个容器中，而<Text>和<GoldText>包裹在另一个容器中，那么事情就到位了。

类似这样的

.wrapper {
  display: flex;
  justify-content: space-around;
  padding: 1rem;
}

.missing-wrapper {
  width: 50%;
}

h1, h5, div {
  border: 1px solid red;
}

<div class="wrapper">
  <div class="missing-wrapper">
    <h5>Prize Pool</h5>
    <h1>$7,162,245</h1>
  </div>
  <div class="missing-wrapper">
    <h5>Number Active</h5>
    <h1>238,741</h1>
  </div>
</div>