display: flex로 설정한 부모노드에서 자식노드인 버튼을 숨기는 방법

문제

부모 노드의 CSS 스타일을 display: flex로 설정해둔 다음 자식 노드를 배치했다.

그렇게 배치한 자식노드 중의 하나인 버튼을 숨기고 싶어서 버튼에 display: none 설정 값을 줬다.

그랬더니 버튼 다음으로 위치된 박스들의 위치가, 사라진 버튼의 위치 쪽으로 밀려 올라오는 문제가 발생했다.

 

해결

버튼의 스타일을 display: none이 아닌 visibility: hidden으로 설정하니 문제가 해결되었다.

 

코드

자바스크립트에서 버튼의 위치는 그대로 남겨둔채 숨기고 싶을 때,

button.style.visibility = 'hidden'

버튼을 다시 보이게 하고 싶을 때,

button.style.visibility = 'visible'