将Canvas放入Div后箭头无法行列排列的布局问题求助

我希望箭头能够按行列排列，但目前仅能纵向排列。每个箭头都被包裹在一个div中，若不将箭头放入div内，布局可正常工作，但我必须保留该嵌套结构。

错误布局：

预期布局：

现有代码 #

HTML #

<div class="grafica" id="grafica">
    <div id="x"></div>
    <div id="y"></div>
</div>

CSS #

.grafica{
     width: 90%;
     height: 95vh;
     box-shadow: 7px 10px 30px -1px black;
}

JavaScript #

function createArrow(){
    const div = document.createElement('div');
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 100;
    canvas.height = 100;
    canvas.className = 'arrow';

    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 3;
    ctx.moveTo(50, 50);
    ctx.lineTo(0, 0);
    ctx.moveTo(20, 10);
    ctx.lineTo(0, 0);
    ctx.lineTo(10, 20);
    ctx.stroke();

    document.addEventListener('mousemove', ()=> {
        let distanceX = getDistanceBetweenElements(canvas, x);
        let distanceY = getDistanceBetweenElements(canvas, y);
        
        let f1 = (k*q1*q2)/distanceX;
        let f2 = (k*q1*q2)/distanceY;

        console.log(f1, f2);

        //canvas.style.transform = `rotate(${a}deg)`;
    });

    grafica.append(div);
    div.append(canvas);
}

解决方案 #

问题根源是包裹箭头的div默认是块级元素（display: block），会独占一行，导致纵向排列。以下三种方法都能解决问题：

方法1：Flex布局（推荐） #

给容器.grafica添加Flex属性，让子元素自动换行排列：

.grafica{
     width: 90%;
     height: 95vh;
     box-shadow: 7px 10px 30px -1px black;
     display: flex;
     flex-wrap: wrap; /* 超出容器宽度时自动换行 */
     gap: 10px; /* 可选：设置箭头间的间距 */
}

/* 给包裹箭头的div设置固定尺寸，和canvas保持一致 */
.grafica > div {
     width: 100px;
     height: 100px;
}

方法2：行内块元素 #

让每个包裹箭头的div变成行内块，这样它们会在一行排列，超出后自动换行：

.grafica > div {
     display: inline-block;
     margin: 5px; /* 可选：设置间距 */
}

注意：如果容器存在空白间隙，可给.grafica添加font-size: 0消除，再给子div恢复font-size: 16px。

方法3：Grid布局 #

如果需要规整的网格行列，用Grid布局自动填充列数：

.grafica{
     width: 90%;
     height: 95vh;
     box-shadow: 7px 10px 30px -1px black;
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px); /* 每列宽度100px，自动填充 */
     gap: 10px; /* 网格间距 */
}

内容的提问来源于stack exchange，提问作者user20202873