[CSS] flex display 에서 justify-content 가 제대로 작동하지않을때?

.container {
    display: "flex"
    ...
}

가로, 세로 축 정렬을 할 때 flex display 방식을 많이 썼는데 갑자기 justify-content 가 제대로 작동을 안했던 일 때문에 찾아봄.

justify-content property isn't working

결론적으로는 flex 내부 아이템들이 고정되고 나서도 밖의 컨테이너와의 남은 여백이 있어야 justify-content 가 잘 작동한다는 당연한 사실이었다.

자세한 이유는 아래와 같다.

• if your flex items are all inflexible (flex: none or flex: 0 0 auto), and smaller than the container.

• if your flex items are flexible, BUT can't grow to absorb all the free space, due to a max-width on each of the flexible items.

나의 경우는 두 번째에 속했다. 내부 아이템 중 하나가 max-width 가 잡혀있는걸 모르고 왜 안되지..? 하고 어리버리를 시전한것.

잘 기억해두자.