설명된 문제를 해결해 보세요.

이 시나리오를 달성하기 위한 조건을 더 잘 탐색하는 데 도움이 되는 작은 데모를 만들었습니다.

테두리 가져오기:Flexbox 항목에 상응하는 접기

.row 元素仍然是一个 Flexbox 容器，但它的 Flex 项目没有设置 border，而是使用 outline 스타일링 설정

윤곽선은 공간을 차지하지 않으며 다른 요소에 의해 생성된 윤곽선과 충돌할 때 "축소"됩니다.

그래서 레이아웃이 이상한 스타일의 영향을 받지 않도록 하기 위해 Flex 항목의 테두리를 표시하려고 할 때 이 데모에서는 해당 테두리를 렌더링하는 데 2가지 주요 측면만 사용합니다.

• 间隙
사이에 플렉스 항목을 설정하세요
• 사이에 남은 간격을 덮을 수 있도록 轮廓 크기를 설정하세요. 요소

:after를 사용하여 요소에 콘텐츠를 추가하세요

또한 빨간색 점은 position:absolute 的 ::after 의사 요소와 함께 적용되어 그리드 레이아웃에 아무 영향도 주지 않습니다.

대시보드 - 옵션 탐색

여기서 페이지 상단에 position:fixed가 포함된 "대시보드"를 추가하여 다음을 제어할 수 있습니다.

• 열 너비(px) : 여기에서 너비를 설정하고 사용 가능한 컨테이너 공간에 따라 행당 열 수를 변경할 수 있습니다.
• 행당 열 수: 여기서 행당 열 수를 설정하고 사용 가능한 컨테이너 공간에 따라 너비를 변경할 수 있습니다. 너비
• 셀 사이의 간격(px): 그리드의 셀 사이 간격
• 빨간 점 표시 여부 전환: 빨간 점을 표시하거나 숨기며 display: none; 不会更改网格布局它完全取决于通过自定义变量 --col-width 设置的 .column 요소 크기
를 다시 보여줍니다.
• Toggle Counter Visibility: 각 플렉스 항목 위에 카운터를 표시하거나 숨깁니다

지금까지의 결론:

우리는 산만함을 최소화하고 셀의 고정 크기만을 기반으로 그리드 레이아웃을 올바르게 설정하는 데 필요한 모든 단계를 수행하려고 노력하지만 여전히 일부 렌더링 문제가 있으며 때로는 특정 줄의 테두리 크기가 있습니다. 불일치 패턴이 발생합니다. 데스크톱 모니터가 아닌 노트북 디스플레이에만 문제가 있다고 해야 할까요 . 이것이 또 다른 요인입니다.

저는 데모에서 차이를 고려하여 다양한 매개변수를 시도하고 수치를 계산했습니다. 적절하고 안전한 레이아웃은 잠재적인 문제를 최소화할 수 있습니다(예: 테두리 크기를 늘릴 수도 있음).

Flex 레이아웃을 사용하면 이보다 더 많은 것을 얻을 수 없습니다.