Search code examples
cssstyled-components

How to align items above and below each other within one flexbox?

I'm currently trying to align the number 238,741 and the letter N in Number. Currently I have a padding between the Prize Pool div and the Number Active div. They're all contained within a parent with display set to flex and flex-direction: column. They're then within another parent container with display flex and direction set to row. I tried setting different paddings between the divs but when I zoom in or out they don't maintain their position.

I cannot figure out how to make them align and stay aligned when zooming in and out or going into mobile view. I've spent 7 hours on it and made little progress by going through CSS tricks.

Code:

  <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;
`;

A Box is just a div, with display set to flex and can take the prop col or row to change the flex direction.

enter image description here

Solution

  • It might help to rethink the structure of your components. If you wrap <PrizeText> and <GoldText> in a container and <Text> and <GoldText> in another container then things will fall into place for you.

    structure

    Kind of like this:

    .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>