Search code examples
htmlcssflexboxalignment

Flexbox items not aligned correctly due to different text size

I have a flex container that has some flex items in it. The flex direction is column and I would like to the elements inside each item be placed correctly under each other.

This is not happening because the h4 text is different in length and thats why the space-between messes up the layout (temperatures).

Any help appreciate it!

HTML

<div class="container next-week">
      <div class="forecast-item">
        <h4 class="day">Today</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>

      <div class="forecast-item">
        <h4 class="day">Tuesday</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>

      <div class="forecast-item">
        <h4 class="day">Wednesday</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>

      <div class="forecast-item">
        <h4 class="day">Thursday</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>

      <div class="forecast-item">
        <h4 class="day">Friday</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>
    </div>

CSS

.next-week {
  color: #f1e3d5;

  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.forecast-item {
  display: flex;
  justify-content: space-between;
}

.forecast-item h4 {
  font-size: 1.6rem;
  color: #f1e3d5;
  margin-bottom: 0.4rem;
}

.forecast-item i {
  font-size: 2rem;
}

.high-low {
  display: flex;
  gap: 1rem;
}

enter image description here

Solution

  • You can add a fixed width to the "day" class.

    .next-week {
  color: #f1e3d5;

  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.forecast-item {
  display: flex;
  justify-content: space-between;
}

.forecast-item h4 {
  font-size: 1.6rem;
  color: #f1e3d5;
  margin-bottom: 0.4rem;
}

.forecast-item i {
  font-size: 2rem;
}

.high-low {
  display: flex;
  gap: 1rem;
}

.forecast-item .day {
  width: 100px;
}
    <div class="container next-week">
      <div class="forecast-item">
        <h4 class="day">Today</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>

      <div class="forecast-item">
        <h4 class="day">Tuesday</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>

      <div class="forecast-item">
        <h4 class="day">Wednesday</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>

      <div class="forecast-item">
        <h4 class="day">Thursday</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>

      <div class="forecast-item">
        <h4 class="day">Friday</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>
    </div>