Search code examples
htmlcssflexboxalignment

How to align items based on 2 other items?

I'm trying to align 3 items in Flexbox. To make things easier, here's the current layout Here's what I have now

The goal here is to keep the numbers ( 1, 2, 3 etc.. ) on the left, strictly aligned, the texts strictly aligned too ( so that the up arrows are vertically aligned ), and the right icon should go wherever it must go as long as it's in the div.

Here's the code :

.div-container .form-div-container .small-text,
.div-container .form-div-container .longer-text,
.div-container .form-div-container .even-longer-text,
.div-container .form-div-container .longer-longer-longer-text,
.div-container .form-div-container .small-text-two {
  display: flex;
  justify-content: space-between;
}

The HTML :

<div class="div-container">
    <div class="form-div-container">
        <div class="small-text">
            <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
        <div class="longer-text">
        <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
        <div class="even-longer-text">
        <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
        <div class="longer-longer-longer-text">
        <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
        <div class="small-text-two">
        <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
    </div>
</div>

The thing is the icons are not all of the same width, so they push the middle item. How can I make things the way I want ? Thanks !

Solution

  • You could set the widths of the elements that contain the numbers and icons to a fixed percentage value like below:

    .box__icon,
.box__number {
  width: 15%;
  text-align: center;
}

    See a full demo below: 

    /*IGNORE STYLE RULES FROM HERE......*/

body {
  margin: 0;
}
i {
  font-style: normal;
}

.box {
  color: white;
  font-family: sans-serif;
  font-size: 2rem;
  font-weight: bold;
  padding: 30px;
}

.box:nth-child(1) {
  background: firebrick;
}

.box:nth-child(2) {
  background: darkturquoise;
}

.box:nth-child(3) {
  background: chocolate;
}

.box:nth-child(4) {
  background: midnightblue;
}


.box__text::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent #ffffff transparent;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

/*.... TO HERE*/


.box {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.box__icon,
.box__number {
  width: 15%; /*Change this to whatever value you want*/
  text-align: center;
}

.box__text {
  color: white;
  font-family: sans-serif;
  text-align: center;
}
    <div class="container">
  <div class="box">
    <div class="box__number">1</div>
    <p class="box__text">Small Text</p>
    <i class="box__icon">Icon---</i>
  </div>
  <div class="box">
    <div class="box__number">2</div>
    <p class="box__text">Longer Text</p>
    <i class="box__icon">Icon</i>
  </div>
  <div class="box">
    <div class="box__number">3</div>
    <p class="box__text">Even Longer Text</p>
    <i class="box__icon">Icon--</i>
  </div>
  <div class="box">
    <div class="box__number">4</div>
    <p class="box__text">Longer Longer Longer Text</p>
    <i class="box__icon">Icon---</i>
  </div>
</div>