How can I make flexbox row children align?

Question

I have come across a little problem in creating my website, which is that when some text is longer than others the divs are not aligned correctly, which you can see with the red straight line in the picture. I was wondering if there is some way to align these divs along the red line?

.FlexAndCenter {
  display: flex;
  justify-content: center;
}

.Padding1REM {
  align-self: center;
  justify-self: center;
  min-width: 100px;
  max-height: 100px;
  max-width: 500px;
  padding: 1rem;
}

.ROWFLEX {
  flex-direction: column;
  display: flex;
  word-wrap: break-word;
}

.BILD {
  align-self: center;
  justify-self: center;
  padding-right: 1rem;
}

<div class="FlexAndCenter Padding1REM">
  <div class="BILD">
    <img src="https://via.placeholder.com/80" />
  </div>

  <div class="ROWFLEX">
    <p>namn på vara: {vara} </p>
    <p>pris på vara: {pris}</p>
    <p>datum köpt: {datum}</p>
    <p>swishnummer: {swish}</p>
  </div>
</div>

<div class="FlexAndCenter Padding1REM">
  <div class="BILD">
    <img src="https://via.placeholder.com/80" />
  </div>

  <div class="ROWFLEX">
    <p>namn på vara: {vara} </p>
    <p>pris på vara: {pris}</p>
    <p>datum köpt: {datum}</p>
    <p>swishnummer: {swish} more words more words</p>
  </div>
</div>

Protips: Classes should have rules that match their names and should do just one thing. They should follow a good naming convention. — isherwood, Apr 15 '22 at 16:18

score 0 · Answer 1 · answered Apr 15 '22 at 16:12

Flex rows don't respect each others' internal sizing. You'll need to explicitly set some sizing so they match, or convert to CSS grid, which provides that out of the box.

.FlexAndCenter {
  display: flex;
  justify-content: center;
}

.Padding1REM {
  align-self: center;
  justify-self: center;
  min-width: 100px;
  max-height: 100px;
  max-width: 500px;
  padding: 1rem;
}

.ROWFLEX {
  flex-direction: column;
  display: flex;
  word-wrap: break-word;
  width: 50vw; /* <----------------------- HERE */
}

.BILD {
  align-self: center;
  justify-self: center;
  padding-right: 1rem;
}

<div class="FlexAndCenter Padding1REM">
  <div class="BILD">
    <img src="https://via.placeholder.com/80" />
  </div>

  <div class="ROWFLEX">
    <p>namn på vara: {vara} </p>
    <p>pris på vara: {pris}</p>
    <p>datum köpt: {datum}</p>
    <p>swishnummer: {swish}</p>
  </div>
</div>

<div class="FlexAndCenter Padding1REM">
  <div class="BILD">
    <img src="https://via.placeholder.com/80" />
  </div>

  <div class="ROWFLEX">
    <p>namn på vara: {vara} </p>
    <p>pris på vara: {pris}</p>
    <p>datum köpt: {datum}</p>
    <p>swishnummer: {swish} more words more words</p>
  </div>
</div>

How can I make flexbox row children align?

1 Answers1