flexbox 레이아웃과 justify-self 속성

본 게시글은 정확한 정보를 담고있지 않을 수 있으므로 다른 자료도 참고하시길 바랍니다.
만약, 본 게시글이 잘못된 정보를 가지고 있다면 피드백 부탁드립니다. 감사합니다.

<div class='parent'>
  <div class='child'>one</div>
  <div class='child'>two</div>
</div>

.parent {
	display: flex;
    width: 400px;
    height: 400px;
}
.child {
	align-self: center;
    justify-self: center;
}

위 css코드의 마지막 부분을 보면 justify-self: center가 child에 적용된 것을 알 수 있는데 이것은 작동하지 않는다. 이유는 flex는 justify-self를 지원하지 않기 때문이다.
그 이유를 찾으려 mdn문서를 읽고 다른 개발자분들에게 물어본 결과 명쾌한 이유를 하나 찾았다.

justify-self 이던 align-self이던 이것들은 html 요소 자신의 위치를 결정할때 사용된다. 예를 들어, 위의 코드에서 justify-self: center가 child에 적용이 되어있는데 child는 one two 2개이고 서로 가로 방향으로 옆에 위치한 상태이므로 요소 자신 자체가 다른 요소때문에 정렬에 간섭을 받기 때문에 이 상태에서 정렬이 된다는 것은 말이 되지 않는다.
실제로, MDN 문서에서도 no makes sense라고 표현되어 있다.

그러나 align-self는 작동한다. 그 이유는 flex가 부모요소에 적용된 상태라면 자식 요소들은 세로 방향(cross-axis)으로는 아무런 이웃 요소가 없기 때문에 자신 자체의 정렬이 가능한 상태에 있다. 자신 자체가 정렬될때 방해하는 요소들이 없다는 것이다.

그럼 justify-content: center 같은 css 속성은 어찌 적용될까?
이 속성은 자식 요소 자체에 정렬이 적용되는 것이 아니라 flexbox안에 있는 자식 요소들을 그룹화시킨 상태로 정렬하기 때문에 가능하다.