CSS - 상단바 깔끔하게 좌우 가운데 정렬

.status-bar {
  display: flex;
  justify-content: space-between;
}

일반적으로는 이렇게하게되면 정리가 된다.

하지만 이렇게 했을 경우 3개의 column의 width 크기가 동일해야 이쁘게 정렬이 된다

크기가 일정하지 않을 경우 가운데에 정렬되는 column이 살짝 왼쪽이나 오른쪽으로 치우친다.

간편하지만 신경쓸게 많은 space-between이다

 

 

 

이쁘게 정렬하려면 아래와 같이 하면 된다

    <div class="status-bar">
      <div class="status-bar__column">
        <span>No Service</span>
        <i class="fas fa-wifi"></i>
      </div>
      <div class="status-bar__column">
        <span>18:43</span>
      </div>
      <div class="status-bar__column">
        <span>11%</span>
        <!-- Todo: Battery Icon-->
        <i class="fas fa-battery-three-quarters fa-2x"></i>
        <!-- Todo: Lightning Icon-->
        <i class="fas fa-bolt"></i>
      </div>
    </div>

.status-bar {
  display: flex;
  justify-content: center;
}
.status-bar__column {
  width: 33%;
}
.status-bar__column:first-child span {
  margin-right: 5px;
}
.status-bar__column:nth-child(2) {
  display: flex;
  justify-content: center;
}
.status-bar__column:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.status-bar__column .fa-battery-three-quarters {
  margin: 0px 5px;
}