space-evenly, space-around, space-between 차이

justify-content 속성의 space-evenly, space-around, space-between

 

space-between
첫 번째 아이템은 컨테이너 시작점에, 마지막 아이템은 컨테이너 끝점에 배치
나머지 공간을 아이템 사이에 균등하게 분배
양 끝에는 여백이 없고 아이템 사이에만 동일한 간격이 생김

space-around
모든 아이템 주변에 동일한 여백을 제공
각 아이템은 좌우로 동일한 여백을 갖게 됨
결과적으로 아이템 사이의 공간은 양 끝 여백의 2배가 됨 (각 아이템의 여백이 합쳐짐)

space-evenly
모든 아이템 사이와 양 끝에 완전히 동일한 간격을 제공
첫 번째 아이템 앞, 마지막 아이템 뒤, 그리고 아이템들 사이의 모든 공간이 정확히 같음
시각적으로 표현하면:

space-between: |item| --- |item| --- |item|
space-around:  | |item| | --- | |item| | --- | |item| |
space-evenly:  | |item| --- |item| --- |item| |


space-evenly가 가장 균등한 느낌을 주며, CSS 레이아웃에서 정확한 시각적 균형을 원할 때 유용함