浏览器开发工具中这个紫色箭头的用途是什么？

Question

这个箭头的目的是什么？感谢这篇文章，我知道了虚线区域，但我不知道箭头是什么。

这是一个可重现的示例：

 .container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        background-color: grey;
        width: 50px;
    }

    .item {
        height: 84px;
        width: 112px;

    }

<div class="container">
    <div class="item"></div>
</div>

Answer 1

箭头仅显示在弹性布局中主轴方向上没有空间容纳项目的完整尺寸。如果将 flex-direction 设置为 row，则它将水平显示；如果将 flex-direction 设置为 column，它将垂直显示。

默认情况下，它不会在您的示例中显示，因为该项目有足够的空间来获取其完整尺寸，但是如果我们将容器的宽度设置为比其子项更低的值，那么会显示此箭头来告诉我们该物品应该有一定的尺寸，但没有空间。这是示例的更新版本，当容器的宽度和高度低于其子容器时，它显示两个方向的箭头。我还添加了另一个容器作为标尺，以查看它是否与箭头匹配。

这是更新后的代码：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: grey;
  width:50px;
}

.item {
  height: 84px;
  width: 112px;
}
.container2{
  width:1000px;
}
.ruler{
  width:112px;
  background:green;
}

<div class="container">
  <div class="item"></div>
</div>

<div class="container2 c2">
  <div class="item ruler">112px</div>
</div>

使用 flex-basis 时可以显示此箭头，该箭头用于设置 Flex 项目的初始主要大小，然后根据 Flex 项目的 flex-grow 和 flex-shrink 值在 Flex 项目之间分配任何剩余空间。 -basis 属性未指定，默认设置为 auto。

请参阅MDN 文档插图，当 Flex 项目设置为（flex-basis 或宽度或高度）的值但它不完全采用 flex-size 时。当容器沿主轴的大小不足以容纳其中的 Flex 项目时，就会发生这种情况，因此如果有空间，此箭头似乎会显示 Flex 项目的完整大小。

这是一个例子，表明

这里容器设置为flex-column，其高度为100px，但其子项目设置为flex-basis设置为200px，这意味着该项目需要额外100px。

上面图片的代码

    .container {
        display: flex;
        /* flex-direction: row; */
        flex-direction: row;
        flex-wrap: nowrap;
        background-color: grey;
    }

    .item {
        height: 84px;
        width: 112px;

    }

    .i1 {
        background-color: red;
        flex-basis: 500px;
    }

    .i2 {
        background-color: green;
        flex-basis: 700px;
    }

    .i3 {
        background-color: blue;
        flex-basis: 800ox;
    }

    .ruler {
        width: 500px;
        background-color: black;
    }

    .c2 {
        flex-direction: column;
        height: 100px;
    }

    .item4 {
        background-color: yellow;
        flex-basis: 200px;
    }

<div class="container">
    <div class="item i1"></div>
    <div class="item i2"></div>
    <div class="item i3"></div>
</div>
<div class="ruler">
    a
</div>

<div class="container c2">
    <div class="item item4"></div>
</div>