我有一个在单元格中绘制正方形的网格。它具有行数和列数,然后绘制网格单元格并检查每个单元格中是否应该有一个正方形(根据数组),并在需要时绘制一个正方形。 HTML 最终结果看起来像这样:(假设我有 1 行和 3 列,只有 2 个单元格应该有正方形)
.row { display: flex; flex-wrap: wrap; flex: 10000 1 0%; } .column { display: flex; flex-wrap: wrap; max-width: 100px; min-width: 10px; padding: 4px; border: 1px solid grey; } .square { background-color: red; width: 100%; aspect-ratio: 1/1; border-radius: 5px; }
<div class="row"> <div class="column"> <div class="square"></div> </div> <div class="column"> <div class="square"></div> </div> <div class="column"></div> </div>
行占据屏幕的整个宽度,所有列之间的列大小应该相同,并根据屏幕上的列数进行更改(例如,如果我有 5 列,它们都应该带有宽度为 100 像素,但如果我有 1000 列,它们的宽度都应该为 10 像素)。
我的问题是,在列大小中的某个断点之后,填充和边框半径看起来很奇怪,我想在遇到该断点时更改它们的值。 我无法使用 @container 查询,因为仍然没有完全支持。
如果它有帮助,我正在使用 vue 2。但我认为在这种情况下 CSS 解决方案会更好。
尝试解决所描述的问题:
我制作了一个小演示,帮助我更好地探索实现这种场景的条件。
获取边框:弹性盒项目上的折叠等效项
.row
元素仍然是一个 Flexbox 容器,但它的 Flex 项目没有设置border
,而是使用outline
设置进行样式设置.轮廓不占用空间,当与另一个元素生成的轮廓碰撞时,它会“崩溃”。
因此,为了确保布局不受样式奇怪的影响,在尝试展示 Flex 项目的边框时,此演示仅依赖于 2 个关键方面来渲染这些边框:
间隙
轮廓
大小,以覆盖之间留下的间隙 元素使用 ::after 将内容添加到元素
另外,红点被应用为具有
position:absolute
的::after
伪元素,再次确保没有任何内容影响网格布局:仪表板 - 探索选项
从那里开始,我添加了一个带有
position:fixed
的“仪表板”,它保留在页面顶部并允许您控制:display: none;
不会更改网格布局它完全取决于通过自定义变量--col-width
设置的.column
元素大小到目前为止的结论:
尽管我们努力最大限度地减少干扰,并采取了仅根据单元格的固定大小正确设置网格布局所需的所有步骤,但仍然存在一些问题渲染问题,有时某些线条的边框尺寸会出现常规的不匹配图案。 我应该说,我只在笔记本电脑显示屏上遇到问题,而不是在台式机显示器上,所以这是另一个因素。
我在演示中尝试了不同的参数并处理数字,同时也考虑到了差距。良好且安全的布局可以最大限度地减少潜在问题(例如,还可以提高边框尺寸)。
使用 Flex 布局我无法得到比这更进一步的结果。