Flexbox 레이아웃에 축소 가능한 요소를 삽입하는 방법

Question

이미지가 둘러싸인 Flexbox 레이아웃이 있고 이미지를 클릭하면 일부 정보를 표시하고 싶습니다. 정보는 "열"을 이동하지 않고 이미지가 포함된 행과 바로 아래 행 사이에 나타나야 합니다. 이것이 제가 원하는 효과 유형입니다: http://olmenta.altervista.org(책을 클릭할 때). 내가 한 일은 다음과 같습니다. https://jsfiddle.net/fabhpnw9/3/varcoll=document.getElementsByClassName("re

P粉739942405 · Answer

세부정보 공개 요소 에는 이미 브라우저에 켜기/끄기 메커니즘이 내장되어 있습니다. 그렇다면 이를 사용하고 요구 사항에 맞게 동작을 수정해 보십시오.

기본원칙은

으아악

CSS를 통해 콘텐츠가 표시되는 방법과 위치를 제어할 수 있습니다. 기본 블록 스타일을 사용하든 Flexbox/Grid 레이아웃을 사용하든 콘텐츠는 일반 문서 흐름 외부에 배치됩니다. 그것들은 일반적인 요소이므로 기본적으로 어떤 일이든 일어날 수 있습니다.
기본적으로 detail/summary 사용자가 다른 곳을 클릭하면 열려 있으므로 현재 "공개" 콘텐츠를 자동으로 닫는 Javascript가 필요합니다.
사용자들은 "닫기 버튼"이 보이지 않으면 혼란스러워하는 경향이 있어서 거기에 하나 넣었습니다. 하지만 정보 상자를 닫으려면 정보 상자의 아무 곳이나 클릭하세요.

저는 이 문제를 조금 과장하여 가능한 한 예제 사이트에 가깝게 노력하면서 코드를 완전히 무시하는 반응형 데모를 만들었습니다(죄송합니다!). 해당되는 곳에 댓글을 달았습니다. 불분명한 경우 댓글로 알려주세요.

클립

으아악 으아악 으아악

P粉041881924 · Answer

.flex-item 上切换 active 类，我们可以为活动 .flex-item 添加高度，以便为 .text에 공간을 남기도록 전환하면.

참고: .text 元素，重要的是不要定位 .flex-items（或 position: static）。否则 .text 的 left: 0 将位于父级 .flex-item의 왼쪽을 올바르게 배치하려면.

다음은 실제 예시의 일부입니다:

으아악 으아악 으아악