[CSS] justify-self

MDN을 보면 다음과 같은 설명이 있습니다.

flex 레이아웃에서는 적용이 되지 않는다고요. 그래서 예제를 보면 grid layout으로 되어 있습니다. 여기서 궁금한 건 flex 레이아웃에서 적용이 안 되는 이유입니다. more을 클릭해서 확인해봅시다.

 

여러가지 설명이 나오는데 간단하게 정리하고 넘어가겠습니다.

기본으로 설정된 메인 축(main axis)는 row입니다. 쉽게 말하면 가로 방향입니다. 가로 방향은 inline direction이라고도 표현할 수 있습니다.  flex-direction:column; 명령어를 통해 메인 축을 column 방향으로 바꿀 수 있습니다. 쉽게 말해 세로 방향입니다. block direction이라고 표현할 수 있습니다.  justify-content는 메인 축 방향의 정렬이며 align-self/align-items는 교차 축(cross axis) 방향으로의 정렬입니다.

 

There is no justify-self in Flexbox

메인 축에 대해, Flexbox는 컨텐츠를 하나의 그룹으로 다룹니다. 아이템들을 배치하기 위해 필요한 공간이 계산되고 나면 남은 공간을 분배할 수 있습니다. justify-content 프로퍼티는 남은 공간이 사용되는 방법을 제어합니다. justify-content: flex-end를 설정하면 남은 공간이 아이템들 앞에 배치되고, justify-content: space-around는 그 차원에서 양쪽에 배치됩니다.

 

이 말은 justify-self 프로퍼티는 Flexbox에서는 말이 안 된다는 것을 의미합니다. 언제나 아이템의 전체 그룹을 이동하는 것을 다루기 때문입니다. 교차 축(cross axis)에서는 말이 됩니다. 해당 차원의 flex container에서 잠재적으로 추가 공간을 갖고 있기 때문입니다. 하나의 아이템이 처음과 끝으로 이동될 수 있습니다.