display:none과 display:flex와의 충돌

바디프로필 관련 웹사이트에서 로그인 화면을 제작하다가, 로그인 이후에 나타나는 div 요소들이 inline형식으로 나타나는 문제점이 생겼다.
로그인이 완료되면 로그인 화면 이전의 요소들을 묶는 div에 display:none을 걸어주었는데, 이 요소들을 가운데로 정렬하기 위하여 사용한 display:flex와 충돌했던 것이다.
여러가지를 수정해보다가, 다음과 같이 JavaScript로 로그인이 완료되면 display:flex를 없애주는 기능을 추가하였다.

 const body = document.querySelector("body");
 const FLEX_CLASSNAME = "flex";
 function afterSubmit(username) {
           greeting.innerText = `Hello ${username}`;
           __body.classList.remove(FLEX_CLASSNAME);__
           greeting.classList.remove(HIDDEN_CLASSANME);
}

여기서 드는 의문점은 다음과 같다.

display:flex는 body태그에 존재하고, display:none은 body태그 내 div태그에 존재하는데, 이 역시도 겹치는 것인가?

아무튼 해결은 됐지만, 조금 더 공부해서 명확하게 알아볼 필요가 있을 것 같다.