CSS Hack : 정확히 중앙에 위치 시키기 (space-between 대신)

CSS Hack

---

ABC가 있을때 A를 화면 좌측끝 B를 화면 중앙 C를 화면 우측끝에 위치시키고 싶을때

flexbox의 justify-content: space-between 를 보통 사용한다.

그러나 B가 화면의 정중앙에 들어가지 않을 경우가 있음. 이럴 때 CSS Hack 사용한다.

레시피 같이 어디든 쓸 수 있다. 이상하지만 작동함.

상위 박스 .status-bar

 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;
 align-items: center