요소 사이의 공간 부족으로 인한 동적 추가 문제

Question

내 마크업에는 다음 템플릿이 있습니다.

으아아아

그런 다음 이렇게 DOM에 삽입합니다.

으아아아

이 방법은 작동하지만 삽입된 버튼 사이에 공간이 없습니다. $clone 앞에 공백을 추가하려고 시도했지만 효과가 없었습니다. 또한 템플릿에 공백을 추가하려고 시도했지만 그 중 하나도 작동하지 않았습니다.

초반에 일부 버튼이 추가되었습니다. 한 줄에 하나씩 있으며 버튼 사이에 공백이 표시됩니다. 하지만 JavaScript를 사용하여 삽입된 버튼 사이의 공백을 표시하는 방법은 무엇입니까?

Answer 1

Flexbox를 사용하여 모든 공백을 축소하고 공백을 추가하세요.

으아아아

으아아아 으아아아 으아아아