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

Question

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

내가 한 일은 다음과 같습니다: https://jsfiddle.net/fabhpnw9/3/

으아악 으아악 으아악

플렉스 아이템의 크기 변경으로 인해 "열"이 이동하고 있습니다. 텍스트에 "position:absolute"를 추가하면 이 문제를 해결할 수 있지만 텍스트가 다음 줄과 충돌합니다. 열이 이동하지 않고 텍스트가 다음 줄과 충돌하지 않게 만드는 방법을 알고 있습니까?

Answer 1

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

기본원칙은

으아악

• CSS를 통해 콘텐츠가 표시되는 방법과 위치를 제어할 수 있습니다. 기본 블록 스타일을 사용하든 Flexbox/Grid 레이아웃을 사용하든 콘텐츠는 일반 문서 흐름 외부에 배치됩니다. 그것들은 일반적인 요소이므로 기본적으로 어떤 일이든 일어날 수 있습니다.

• 기본적으로 detail/summary 사용자가 다른 곳을 클릭하면 열려 있으므로 현재 "공개" 콘텐츠를 자동으로 닫는 Javascript가 필요합니다.

• 사용자들은 "닫기 버튼"이 보이지 않으면 혼란스러워하는 경향이 있어서 거기에 하나 넣었습니다. 하지만 정보 상자를 닫으려면 정보 상자의 아무 곳이나 클릭하세요.

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

클립

으아악 으아악 으아악

Answer 2

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

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

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

으아악 으아악 으아악