Flex 컨테이너 내부에 xy개의 카드와 단일 위젯을 렌더링하는 React 앱을 만들고 있습니다. 모든 카드의 너비와 높이는 동일하지만 위젯의 높이는 卡片高度 * 2 + row-gap와 같습니다. 컨테이너의 너비는 뷰포트 너비에 따라 변경되며 시각적으로 각각 카드가 있는 2개 또는 3개의 열처럼 보여야 합니다. 더 명확하게 하기 위해 위젯이 파란색으로 표시된 필수 레이아웃의 모형 이미지를 제공했습니다.
무엇을 시도하더라도 행의 높이를 해당 크기로 변경하지 않고는 위젯을 올바른 위치에 표시할 수 없습니다. 아래 표시된 것처럼 1~2개의 카드를 더 렌더링해야 하는 "빈 행"을 남겨 둡니다.
현재 솔루션에는 Javascript가 포함되어 있으며 뷰포트 너비에 따라 2~4개의 카드를 별도의 작은 Flex 컨테이너에 로드합니다. 이 컨테이너는 기본 Flex 컨테이너의 첫 번째 하위 항목으로 렌더링됩니다. 이 해결 방법은 시각적으로 훌륭하게 작동하지만 제대로 작동하려면 다양한 상황을 처리해야 하므로 코드가 더 복잡해집니다. 나는 CSS/Flexbox를 사용하여 동일한 목표를 달성하고 싶지만 아직 초보자이고 이전에 이와 같은 레이아웃을 수행한 적이 없으며 어떻게 해야할지 전혀 모릅니다. 위젯 은 绝对定位 그렇게 하면 하위 요소의 스크롤 기능이 중단될 수 있습니다.
도움이 될 수 있도록 HTML 및 CSS 측정값을 정확한 비율로 테스트하고 있습니다.
으아아아 으아아아
현재 프로젝트뿐만 아니라 지식과 이해를 넓히기 위해 Flexbox에서 이와 같은 레이아웃을 만드는 방법을 배우고 싶습니다. 이 문제를 해결하는 방법에 대한 아이디어가 있으면 도와주세요. 미리 감사드립니다 :)
P粉3916779212024-02-27 15:38:05
이 작업은 그리드 레이아웃을 사용하여 수행할 수 있으며 JavaScript가 필요하지 않습니다. 예는 다음과 같습니다.
@ralph.m이 언급했듯이. grid-column-end: -1; 设置为 .widget.widget >를 추가하면 언제든지 이 작업을 수행할 수 있습니다.
P粉3215842632024-02-27 09:10:49
Flexbox 레이아웃은 이 작업을 수행할 수 없습니다, 2D 그리드를 생성하지 않으므로 그리드박스 레이아웃을 사용해야 합니다. , 따라서 요소는 간격을 두지 않고 행과 열에 걸쳐 있을 수 있습니다. < /p>
예는 다음과 같습니다.