如果 flex-direction 设置为 row-reverse，则 getBoundingClientRect 会给出不正确的 x 坐标-解网

问：

我用来获取页面上元素的坐标。我看到一种我无法解释的奇怪行为。如果我得到 with 类的坐标，我会得到看起来正确的值。另一方面，如果我得到它 with text ，我得到值 .由于这个 div 是首先显示的，因为，我希望它等于。为了检查这是否与，我将其值更改为然后获取带有文本的坐标，并按预期获得。getBoundingClientRect()xxdivgrid8div117.984375flex-direction: row-reversex8flex-directionrowxdiv18

有人可以帮我理解为什么会导致这种情况吗？flex-direction

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Auto Layout</title>
  <style>
    .container {
      width: 100vw;
      height: 100vh;
      background-color: cadetblue;
    }
    .grid {
      width: 600px;
      height: 800px;
      overflow-y: hidden;
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: nowrap;
      gap: 20px;
      background-color: blue;
    }
    .item {
      font-size: 16px;
      text-align: center;
      color: white;
      background-color: red;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="grid">
    <div class="item" style="height: 100px; width: 100px">1</div>
    <div class="item" style="height: 100px; width: 200px">2</div>
    <div class="item" style="height: 200px; width: 300px">3</div>
    <div class="item" style="height: 300px; width: 100px">4</div>
    <div class="item" style="height: 100px; width: 100px">5</div>
    <div class="item" style="height: 200px; width: 200px">6</div>
    <div class="item" style="height: 100px; width: 300px">7</div>
    <div class="item" style="height: 100px; width: 300px">8</div>
    <div class="item" style="height: 200px; width: 200px">9</div>
    <div class="item" style="height: 100px; width: 200px">10</div>
    <div class="item" style="height: 300px; width: 200px">11</div>
  </div>
</div>
</body>
</html>

谢谢。

html css google-chrome dom flexbox

如果 flex-direction 设置为 row-reverse，则 getBoundingClientRect 会给出不正确的 x 坐标

getBoundingClientRect gives incorrect x coordinate if flex-direction is set to row-reverse

评论