为什么即使设置了 flex-basis，width 属性也会影响 flex-item？ [复制]

Question

我在 flex-box 上进行了一些尝试，但我对此一无所知。到目前为止，我认为 flex-box 项目的 width 属性的值并不重要，只要 flex-basis 是放。我也在this Blog 中找到了这个声明。但是如果我删除 div 元素的 width 属性，结果就会改变。为什么？这里到底发生了什么？

flex-basis: 40px; 和 width: 40px; 的div元素集

flex-basis: 40px; 和 width: 40px; 的div元素不设置

我还创建了一个jsfiddle。

*flex-basis: 40px;* 和 *width: 40px;* div 元素集：

*
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
}

section
{
    display: inline-block;
}

ol
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    
    background-color: gray;
}

li
{
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    
    background-color: greenyellow;
}

a
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

div /* Icon Placeholder */
{
    flex-basis: 40px;
    flex-grow: 0;
    flex-shrink: 0;

    width: 40px;
    height: 40px;
    
    background-color: red;
}

p
{
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
}

<section>
    <ol>
        <li><a href="#"><div></div><p>The birch canoe slid on the smooth planks.</p></a></li>
        <li><a href="#"><div></div><p>Glue the sheet to the dark blue background.</p></a></li>
        <li><a href="#"><div></div><p>It's easy to tell the depth of a well.</p></a></li>
        <li><a href="#"><div></div><p>These days a chicken leg is a rare dish.</p></a></li>
        <li><a href="#"><div></div><p>Rice is often served in round bowls.</p></a></li>
    </ol>
</section>

*flex-basis: 40px;* and *width: 40px;* of div element not set:

*
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
}

section
{
    display: inline-block;
}

ol
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    
    background-color: gray;
}

li
{
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    
    background-color: greenyellow;
}

a
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

div /* Icon Placeholder */
{
    flex-basis: 40px;
    flex-grow: 0;
    flex-shrink: 0;

    height: 40px;
    
    background-color: red;
}

p
{
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
}

<section>
    <ol>
        <li><a href="#"><div></div><p>The birch canoe slid on the smooth planks.</p></a></li>
        <li><a href="#"><div></div><p>Glue the sheet to the dark blue background.</p></a></li>
        <li><a href="#"><div></div><p>It's easy to tell the depth of a well.</p></a></li>
        <li><a href="#"><div></div><p>These days a chicken leg is a rare dish.</p></a></li>
        <li><a href="#"><div></div><p>Rice is often served in round bowls.</p></a></li>
    </ol>
</section>

Answer 1

您在包含锚元素上设置了flex-direction: row;，这意味着flex-basis 将是行的宽度。

您已经设置了flex-basis 以及该父元素内div 元素的宽度。 请注意，更改这些 div 元素的宽度不会更改 div 的宽度，您也可以在屏幕截图中看到。它表示预期的 40 像素，因为您还将 flex-grow 设置为 0。顺便说一句，flex: [grow] [shrink] [basis] 是一个方便的速记。

那么现在发生了什么：带有基础的 div 的所有父元素都在增长，因为它们默认具有 width: auto;，这会影响包含 a 的元素以及 li。 作为回报，div 的相邻元素，即带有绿色背景的 p，也会填充其父容器，因为它没有 flex-basis 和 width: auto。

那么为什么会这样呢？ 您可以在添加时看到，例如div 的宽度为 10px，容器相应地增长 10px，并且作为块元素， p 标签标记了新的剩余空间。 这是一个嵌套的 flex，已知有一些错误 - 我不确定这是其中之一或预期的行为，但父元素根据您设置的宽度而不是它在 dom 中占用的实际宽度增长或弹性基础。

作为一般提示：也许查看 css 网格以获得更复杂的嵌套布局。