CSS) justify-content: space-between 해도 센터가 안 맞을떄

issue

justify-content: space-between

플렉스를 써도 시간이 안 중앙이 안될 수도 있음

이유는 왼쪽과 오른쪽 div의 너비가 다르기 때문에

 

solution

 style.css

.status-bar{
    display:flex;
    justify-content: center;
}
.status-bar__column{
    width:33%;
}

.status-bar__column:nth-child(2){
    display:flex;
    justify-content: center;
}
.status-bar__column:last-child{
    display:flex;
    justify-content: flex-end;
}

status-bar = [ status-bar_column 3개 ] 된 구조