display:noneとdisplay:flexとの競合

本体プロファイルに関連するWebサイトでログイン画面を作成すると、ログイン後に発生するdiv要素がインライン形式で発生する問題が発生します.
ログインが完了すると、登録画面をバインドする前の要素の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タグに、これも重なっているのでしょうか?
とにかく、解決したものの、もっと勉強して、明確に理解しなければなりません.